一.傳遞數據
1.props 傳入單數據
就像 data 一樣,prop 可以用在模板內,同樣也可以在 vm 實例中像“this.message”這樣使用
<template> <div id="app"> <h1>{{title}}</h1> <child message="hello! Prop"></child> </div> </template> <script> import Vue from 'vue'; Vue.component('child', { // 聲明 props props: ['message'], template: '<span>{{ message }}</span>' }) export default { name: 'app', data: function () { return { title: '使用 Prop 傳遞數據' } } } </script>
<child message="hello! Prop"></child>
2.props 傳入多個數據
如果在父組件的模板類添加其他元素或者字符會有:
①在最前面加入—每個子組件渲染出來都會在其前面加上
②在最后面加入—每個子組件渲染出來都會在其后面加上
③在中間加入—他前面子組件后面加上,后面的子組件后面加上
(1)1種
<template> <div id="app"> <child msg="hello!"></child> <child nihao="hello1!"></child> <child nisha="hello2!"></child> </div> </template> <script> import Vue from 'vue'; Vue.component('child', { props: ['msg','nihao','nisha'], template: '<span>{{ msg }}{{nihao}}{{nisha}}</span>', }); export default { name: 'app', data: function () { return { } } } </script>
(2)2種
template: '<span>小明,{{ msg }}{{nihao}}{{nisha}}</span>',
(3)3種
template: '<span>{{ msg }}{{nihao}}{{nisha}}小明</span>',
(4)4種
template: '<p>{{ msg }}小明 {{nihao}} {{nisha}}小林</p>',
注意:camelCased (駝峰式) 命名的 prop 需要轉換為相對應的 kebab-case (短橫線隔開式) 命名:
Vue.component('child', {
// camelCase in JavaScript
props: ['myMessage'],
template: '<span>{{ myMessage }}</span>'
})
<!-- kebab-case in HTML -->
<child my-message="hello!"></child>
二.動態prop
要動態地綁定父組件的數據到子模板的 props,與綁定到任何普通的HTML特性相類似,就是用 v-bind。每當父組件的數據變化時,該變化也會傳導給子組件
<template> <div id="app"> <input v-model="parentMsg"> <br> <child v-bind:my-message="parentMsg"></child> </div> </template> <script> import Vue from 'vue'; export default { name: 'app', data: function () { return { title: '使用 Prop 傳遞數據', parentMsg: 'Message from parent' } }, components: { child: { props: ['myMessage'], template: '<span>{{myMessage}}</span>' } } } </script>
三.表達式計算,傳遞值
如果想傳遞一個實際的 number,需要使用 v-bind
,從而讓它的值被當作 JavaScript 表達式計算
<comp v-bind:some-prop="1"></comp>
<template> <div id="app"> <p>{{tle1}}:<comp total="123+456"></comp></p> <p>{{tle2}}<comp :total="123+456"></comp></p> </div> </template> <script> import Vue from 'vue'; Vue.component("comp", { props: ["total"], template: "<span>total: {{total}}</span>", }); export default { name: 'app', data: function () { return { tle1: '這里傳遞是字符串', tle2: '用了v-bind動態語法,傳遞值會通過js的表達式計算,得到個值:' } } } </script>
四.Prop類型綁定
prop 默認是單向綁定:當父組件的屬性變化時,將傳導給子組件,但是反過來不會。這是為了防止子組件無意修改了父組件的狀態——這會讓應用的數據流難以理解。
五.prop驗證
傳入的數據不符合規格,Vue 會發出警告。當組件給其他人使用時,這很有用。
<template> <div id="app"> <div>name:{{dr.name}}, age:{{dr.age}}.<input v-model="telphone" /> </div> <br /><br /> <div> <span>vue自定義組件</span><br /> <child :msg_null="123+456" msg_string="adss" :msg_number="0" :msg_twoway.sync="telphone" :msg_validate="mobilephone" :msg_number2String="mobilephone" :msg_obj2json="dr" :msg_json2obj="drJson"></child> </div> </div> </template> <script> import Vue from 'vue'; Vue.component("child", { props: { msg_null: null,//基礎類型檢測("null"意思是任何類型都可以) msg_string: { //String類型,必須是定義過的,可以是空字符串"" type: String, required: true, }, msg_number: {//Number類型,默認值100 type: Number, default: 100, }, msg_obj: {//Object類型,返回值必須是js對象 type: Object, default: function() { return { name: "DarkRanger", age: "18", } } }, msg_twoway: { //指定這個prop為雙向綁定,如果綁定類型不對將拋出一條警告 type: String, twoWay: true, }, msg_validate: { //自定義驗證,必須是Number類型,驗證規則:大於0 type: Number, validator: function(val) { return val > 0; } }, msg_number2string: { //將值轉為String類型,在設置值之前轉換值(1.0.12+) coerce: function(val) { return val + "" } }, msg_obj2json: { //js對象轉JSON字符串 coerce: function(obj) { return JSON.stringify(obj); } }, msg_json2obj: {//JSON轉js對象 coerce: function(val) { return JSON.parse(val); } }, }, template: '<div><b>msg_null=123+456=</b> {{msg_null}}</br> </br><b>msg_string="1":</b>{{msg_string}}</br></br><b>msg_number:</b> {{msg_number}}</br> </br><b>msg_obj:</b>{{"name-->"+msg_obj.name+", age-->"+msg_obj.age}}</br> </br><b>msg_twoway:</b><input v-model="msg_twoway"></br></br><b>msg_validate:</b>{{msg_validate}}</br> </br><b>msg_number2String:</b> {{msg_number2string}}</br></br><b>msg_obj2json:</b> {{msg_obj2json}}</br> </br><b>msg_json2obj:</b>{{"name: "+msg_json2obj.name+"; age: "+msg_json2obj.age}}</div>' }); export default { name: 'app', data: function () { return { telphone: "0356-1234567", mobilephone: 15912345678, dr: { name: "DarkRanger", age: 25 }, drJson: {"name":"DarkRanger","age":25} } } } </script>
解釋:
①、msg_null:不論什么數據類型,只要能解析成功,就渲染成正確的html
②、msg_string:只能傳遞String類型的字符串,如果將child06中的“msg_string="this is string"”更改為“:msg_string="1+2"”,
控制台報錯:
③、msg_number:如果在child06標簽中沒有定義值,我們將會取默認值100,現在定義了“:msg_number="99"”,如果將“:msg_number="99"”更改為“msg_number="99"”,控制台報錯:
④、msg_obj:在js中我們定義的msg_obj的default屬性是一個具有返回js對象的函數,這里取值的時候直接取的就是返回值,如果在child06中定義或者綁定了新的js對象,則會將msg_obj更新為新的數據。取js對象屬性值的時候用{{Object.prop}}取值即可。
⑤、msg_twoway:雙向數據綁定,在測試的過程中發現,即使設置“twoWay: true”,當子組件發生變化時,vue實例的數據並不會更新,還是單向的數據綁定,這里我將child06中原先的“:msg_twoway="telphone"”更改為“:msg_twoway.sync="telphone"”,保證測試能夠數據雙向綁定。
⑥、msg_validate:有驗證規則的組件數據,這里定義的規則是當前數值必須大於0,如果將child06中的“:msg_validate="mobilephone"”更改為“:msg_validate="-1"”。控制台報錯:
⑦、msg_number2string:在結果賦值之前將數值轉化為字符串。
⑧、msg_obj2json:vue.js內置了JSON的兩個方法,一個是JSON.parse(jsonStr)--》將JSON字符串轉化為js對象,另外一個是JSON.stringify(obj)--》將js對象序列化為JSON字符串。
這里是將obj轉化為json字符串,需要添加coerce屬性,它是一個具有返回json字符串的函數,當然不是必須得用JSON.stringify(obj)方法,只要方法合理,能夠轉化為json能夠識別的字符串即可。
⑨、msg_json2obj: 將json字符串轉化為js對象。