子組件能夠通過自身的props選項獲取父組件上的數(shù)據(jù)，但是在默認(rèn)情況下，props是單向綁定的---當(dāng)父組件數(shù)據(jù)（屬性）發(fā)生變化的時候會傳遞給子組件，引起子組件的變化，但不能反過來并且不允許子組件直接改變父組件的數(shù)據(jù)，會報錯的。例如：
成都創(chuàng)新互聯(lián)于2013年創(chuàng)立，先為扶風(fēng)等服務(wù)建站，扶風(fēng)等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為扶風(fēng)企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。
也就是說當(dāng)通過一種方法改變父組件數(shù)據(jù)的時候，子組件與之相關(guān)聯(lián)的props數(shù)據(jù)也會發(fā)生改變，從而影響子組件，但是子組件直接改變從父組件拿過來的props數(shù)據(jù)卻不能影響父組件的原始數(shù)據(jù)。也就是說一般情況下只能是“父影響子，而不是子影響父”。
兩種情況：
1.如果子組件想將從父組件獲得的數(shù)據(jù)作為局部數(shù)據(jù)來使用，可以將其給保存到子組件的局部變量data中（子組件中的變量），不影響父組件的數(shù)據(jù)；例如：
重慶分公司
重慶分公司
data:function(){
return {
weather:{
tempre:"22.3℃",
weth:"rain",
wind:this.ser
}
}
},這里的this.sers就是來源于子組件的props數(shù)據(jù)。
2.如果子組件想修改數(shù)據(jù)并且同步更新到父組件，兩種解決方式
第一種：使用.sync加上顯式觸發(fā)的一個事件this.$emit("update:你要更改的props數(shù)據(jù)", 改變后的值)，也就是在一個事件觸發(fā)的函數(shù)中通過this.$emit("update:你要更改的props數(shù)據(jù)", 改變后的值)來改變數(shù)據(jù)；例如：
HTML部分
大家好，我是{{animal.name}}貓，我已經(jīng)和Jerry斗爭了{(lán){animal.age}}年了
給綁定的數(shù)據(jù)使用.sync修飾符一只皮毛是{{dog.hair}}色，身高是{{dog.height}}的狗狗,在散步。。。
今天的天氣：{{weather.weth}},風(fēng)力{{weather.wind}},溫度{{weather.tempre}},{{animalname}},{{animalage}}
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指的是當(dāng)前父組件的實(shí)例
this.animal.name = "Kitty"http://改變父組件中的數(shù)據(jù)
}
},
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,需要顯式地觸發(fā)一個更新事件（this.$emit("update:你要更改的props數(shù)據(jù)", 改變后的值)）
changeFatDaAge:function(){
// this.animalage = 19;
this.$emit("update:animalage", 19)//通過這個方法來改變子組件props數(shù)據(jù)，并引起父組件相應(yīng)數(shù)據(jù)的改變
}
}
}
}
}
}
})當(dāng)點(diǎn)擊按鈕的時候父組件上的原始數(shù)據(jù)也會發(fā)生改變，不過這種方式不常用，寫法也太麻煩，不建議使用；
第二種：將父組件的數(shù)據(jù)包裝成對象并綁定到子組件上，在子組件中修改對象的屬性（其實(shí)并沒有真正改變該對象，因為對象是引用類型的數(shù)據(jù)，雖然屬性發(fā)生了變化，但指針并沒有發(fā)生變化），常用。例如：
HTML部分：
一只皮毛是{{dog.hair}}色，身高是{{dog.height}}的狗狗,在散步。。。
一只皮毛是{{dog.hair}}色，身高是{{dog.height}}的狗狗,在散步。。。
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指的是當(dāng)前父組件的實(shí)例
this.animal.name = "Kitty"http://改變父組件中的數(shù)據(jù)
}
},
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 = "紅"
}
}
}
}
}
}
})以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
