子組件能夠通過自身的props選項獲取父組件上的數據，但是在默認情況下，props是單向綁定的---當父組件數據（屬性）發生變化的時候會傳遞給子組件，引起子組件的變化，但不能反過來并且不允許子組件直接改變父組件的數據，會報錯的。例如：
也就是說當通過一種方法改變父組件數據的時候，子組件與之相關聯的props數據也會發生改變，從而影響子組件，但是子組件直接改變從父組件拿過來的props數據卻不能影響父組件的原始數據。也就是說一般情況下只能是“父影響子，而不是子影響父”。
兩種情況：
1.如果子組件想將從父組件獲得的數據作為局部數據來使用，可以將其給保存到子組件的局部變量data中（子組件中的變量），不影響父組件的數據；例如：
data:function(){ return { weather:{ tempre:"22.3℃", weth:"rain", wind:this.ser } } },這里的this.sers就是來源于子組件的props數據。
2.如果子組件想修改數據并且同步更新到父組件，兩種解決方式
第一種：使用.sync加上顯式觸發的一個事件this.$emit("update:你要更改的props數據", 改變后的值)，也就是在一個事件觸發的函數中通過this.$emit("update:你要更改的props數據", 改變后的值)來改變數據；例如：
HTML部分
<div id= "container" v-cloak> <my-compon></my-compon> </div> <!-- 父組件模板 --> <template id="myComp"> <div> <h3>大家好，我是{{animal.name}}貓，我已經和Jerry斗爭了{{animal.age}}年了</h3> 給綁定的數據使用.sync修飾符 <my-comp-son v-bind:animalage.sync="animal.age"></my-comp-son> </div> </template> <!-- 子組件模板 --> <template id="myCompSon"> <div> <h4>一只皮毛是{{dog.hair}}色，身高是{{dog.height}}的狗狗,在散步。。。</h4> <h3>今天的天氣：{{weather.weth}},風力{{weather.wind}},溫度{{weather.tempre}},{{animalname}},{{animalage}}</h3> <button @click = "changeFatDaAge">點擊父組件中的數據會跟著改變方式一</button> </div> </template>JS部分
var app = new Vue({ el:"#container", data:{ house:{ date:"2017-10-10", area:"144m²", floor:6, }, carBrand:"Benzi" }, components:{ "my-compon":{//父組件 template:"#myComp", data:function(){ return { animal:{ name:"Tom", age:3, skin:"black" }, shoe:"鴻星爾克", dog:{ hair:"brown", height:1.25 } } }, methods: { changeData:function () {//這里的this指的是當前父組件的實例 this.animal.name = "Kitty"http://改變父組件中的數據 } }, components:{ "my-comp-son":{//子組件 template:"#myCompSon", props:["animalname","animalage","dog"],//地位和data一樣，獲取方式也是一樣 data:function(){ return { weather:{ tempre:"22.3℃", weth:"rain", wind:"3級" } } }, methods:{ // 給v-bind使用修飾符.sync,需要顯式地觸發一個更新事件（this.$emit("update:你要更改的props數據", 改變后的值)） changeFatDaAge:function(){ // this.animalage = 19; this.$emit("update:animalage", 19)//通過這個方法來改變子組件props數據，并引起父組件相應數據的改變 } } } } } } })當點擊按鈕的時候父組件上的原始數據也會發生改變，不過這種方式不常用，寫法也太麻煩，不建議使用；
第二種：將父組件的數據包裝成對象并綁定到子組件上，在子組件中修改對象的屬性（其實并沒有真正改變該對象，因為對象是引用類型的數據，雖然屬性發生了變化，但指針并沒有發生變化），常用。例如：
HTML部分：
<div id= "container" v-cloak> <my-compon></my-compon> </div> <!-- 父組件模板 --> <template id="myComp"> <div> <h4>一只皮毛是{{dog.hair}}色，身高是{{dog.height}}的狗狗,在散步。。。</h4> <!-- 將父組件的數據包裝成對象并綁定到子組件上，在子組件中修改對象的屬性，在這是dog --> <my-comp-son :dog = "dog"></my-comp-son> </div> </template> <!-- 子組件模板 --> <template id="myCompSon"> <div> <h4>一只皮毛是{{dog.hair}}色，身高是{{dog.height}}的狗狗,在散步。。。</h4> <button @click="changeFondata">點擊父組件中的數據會跟著改變方式二</button> </div> </template>JS部分
var app = new Vue({ el:"#container", data:{ house:{ date:"2017-10-10", area:"144m²", floor:6, }, carBrand:"Benzi" }, components:{ "my-compon":{//父組件 template:"#myComp", data:function(){ return { animal:{ name:"Tom", age:3, skin:"black" }, shoe:"鴻星爾克", dog:{ hair:"brown", height:1.25 } } }, methods: { changeData:function () {//這里的this指的是當前父組件的實例 this.animal.name = "Kitty"http://改變父組件中的數據 } }, components:{ "my-comp-son":{//子組件 template:"#myCompSon", props:["animalname","animalage","dog"],//地位和data一樣，獲取方式也是一樣 data:function(){ return { weather:{ tempre:"22.3℃", weth:"rain", wind:"3級" } } }, methods:{ //在子組件中修改對象的屬性 changeFondata:function(){ this.dog.hair = "紅" } } } } } } })以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
