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>