溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
子組件能夠通過自身的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>
<h4>大家好，我是{{animal.name}}貓，我已經和Jerry斗爭了{{animal.age}}年了</h4>
給綁定的數據使用.sync修飾符
<my-comp-son v-bind:animalage.sync="animal.age"></my-comp-son>
</div>
</template>
<!-- 子組件模板 -->
<template id="myCompSon">
<div>
<h5>一只皮毛是{{dog.hair}}色，身高是{{dog.height}}的狗狗,在散步。。。</h5>
<h4>今天的天氣：{{weather.weth}},風力{{weather.wind}},溫度{{weather.tempre}},{{animalname}},{{animalage}}</h4>
<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>
<h5>一只皮毛是{{dog.hair}}色，身高是{{dog.height}}的狗狗,在散步。。。</h5>
<!-- 將父組件的數據包裝成對象并綁定到子組件上，在子組件中修改對象的屬性，在這是dog -->
<my-comp-son :dog = "dog"></my-comp-son>
</div>
</template>
<!-- 子組件模板 -->
<template id="myCompSon">
<div>
<h5>一只皮毛是{{dog.hair}}色，身高是{{dog.height}}的狗狗,在散步。。。</h5>
<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 = "紅"
}
}
}
}
}
}
})
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
