Vue2.0使用props傳遞資料---6
阿新 • • 發佈:2019-02-18
<body> <div id = 'app'> <div> <h3>正常的資料</h3> <p> Prop驗證 </p> <div> <p>name:{{dr.name}}</p> <p>age:{{dr.age}}</p> </div> </div> <hr> <div> <h3>元件的資料</h3> <div> <p><input v-model="telphone" /></p> </div> <div> <div>component元件(預設):</div> <child :child-msg = 'name' my-text = '測試看看' :msg_null="123+456" msg_string="this is string" :msg_number="99" :msg_twoway.sync="telphone" :msg_validate="mobilephone" :msg_number2String="mobilephone" :msg_obj2json="dr" :msg_json2obj="drJson"> </child> </div> </div> </div> <template id = 'child'> <div> <p>msg_1:{{msg_1}}</p> <p>childMsg:{{childMsg}}</p> <p>myText:{{myText}}</p> <p>show_text:{{show_text}}</p> <hr> <div>msg_null:{{msg_null}}</div> <div>msg_string:{{msg_string}}</div> <div>msg_number:{{msg_number}}</div> <div>msg_obj:{{"name-->"+msg_obj.name+", age-->"+msg_obj.age}}</div> <div>msg_twoway:<input v-model="msg_twoway"></div> <div>msg_validate:{{msg_validate}}</div> <div>msg_number2String:{{msg_number2string}}</div> <div>msg_obj2json:{{msg_obj2json}}</div> <div>msg_json2obj:{{"name: "+msg_json2obj.name+"; age: "+msg_json2obj.age}}</div> </div> </template> <script src="https://cdn.bootcss.com/vue/2.5.8/vue.min.js"></script> <script type="text/javascript"> Vue.component('child', { template : '#child', props: { childMsg : String, myText : String, //基礎型別檢測("null"意思是任何型別都可以) msg_null: null, //String型別,必須是定義過的,可以是空字串"" msg_string: { type: String, required: true, }, //Number型別,預設值100 msg_number: { type: Number, default: 100, }, //Object型別,返回值必須是js物件 msg_obj: { type: Object, default: function() { return { name: "DarkRanger", age: "18", } } }, //指定這個prop為雙向繫結 //如果繫結型別不對將丟擲一條警告 msg_twoway: { type: String, twoWay: true, }, //自定義驗證,必須是Number型別,驗證規則:大於0 msg_validate: { type: Number, validator: function(val) { return val > 0; } }, //將值轉為String型別 //在設定值之前轉換值(1.0.12+) msg_number2string: { coerce: function(val) { return val + "" } }, //js物件轉JSON字串 msg_obj2json: { coerce: function(obj) { return JSON.stringify(obj); } }, //JSON轉js物件 msg_json2obj: { coerce: function(val) { return JSON.parse(val); } } }, data : function () { return { msg_1 : '這是子元件自己的資料', childMsg : '這是子元件自己的資料', // 這個資料會被父元件傳過來的資料覆蓋 show_text : this.myText } } }) ; var _vm = new Vue({ data : { name : '風君子', telphone: "0356-1234567", mobilephone: 15912345678, dr: { name: "DarkRanger", age: 25 }, drJson: '{"name":"DarkRanger","age":25}', }, methods : {} }).$mount('#app'); </script> <!-- 解釋說明: 1、msg_null:不論什麼資料型別,只要能解析成功,就渲染成正確的html。 2、msg_string:只能傳遞String型別的字串,如果將child中的“msg_string="this is string"”更改為“:msg_string="1+2"”,控制檯報錯。 3、msg_number:如果在child06標籤中沒有定義值,我們將會取預設值100,現在定義了“:msg_number="99"”,如果將“:msg_number="99"”更改為“msg_number="99"”,控制檯報錯。 4、msg_obj:在js中我們定義的msg_obj的default屬性是一個具有返回js物件的函式,這裡取值的時候直接取的就是返回值,如果在child06中定義或者綁定了新的js物件,則會將msg_obj更新為新的資料。取js物件屬性值的時候用{{Object.prop}}取值即可。 5、msg_twoway:雙向資料繫結,在測試的過程中發現,即使設定“twoWay: true”,當子元件發生變化時,vue例項的資料並不會更新,還是單向的資料繫結,這裡我將child中原先的“:msg_twoway="telphone"”更改為“:msg_twoway.sync="telphone"”,保證測試能夠資料雙向繫結。 6、msg_validate:有驗證規則的元件資料,這裡定義的規則是當前數值必須大於0,如果將child06中的“:msg_validate="mobilephone"”更改為“:msg_validate="-1"”。控制檯報錯。 7、msg_number2string:在結果賦值之前將數值轉化為字串。 8、msg_obj2json:vue.js內建了JSON的兩個方法,一個是JSON.parse(jsonStr)==》將JSON字串轉化為js物件,另外一個是JSON.stringify(obj)==》將js物件序列化為JSON字串。這裡是將obj轉化為json字串,需要新增coerce屬性,它是一個具有返回json字串的函式,當然不是必須得用JSON.stringify(obj)方法,只要方法合理,能夠轉化為json能夠識別的字串即可。 9、msg_json2obj: 將json字串轉化為js物件。 --> </body>