溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
父子組件之間的數據關系，我這邊將情況具體分成下面4種：
父組件修改子組件的data，并實時更新
子組件通過$emit傳遞子組件的數據，this.$data指當前組件的data(return{...})里的所有數據，
this.$emit('data',this.$data);
之后通過父組件的getinputdata方法來接收數據
@data='getinputdata'
其中的data就是傳過來的數據，通過修改這個數據就可以通過父組件實時更新子組件
getinputdata(data) {
console.log(data);
data.background = {
backgroundColor: 'yellow',
border: 'none'
};
}
子組件修改父組件的data
在子組件中是修改不了父組件的data的，只有通過上面的$emit方法在父組件中修改數據。
可參考vue官網的自定義事件：https://cn.vuejs.org/v2/guide/components.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6
子組件獲取父組件的data，修改但不實時更新
1. 子組件將父組件通過props傳遞的數據，再把props的值賦給let或var聲明變量，之后使用這個變量就可以了。
let test = this.testoutdata;
test++;
console.log(test);
console.log('test:'+this.testoutdata);
2. 子組件將父組件通過props傳遞的數據，再把props的值賦給data(return{...})里的變量，之后使用這個變量就可以了。
this.outtest++;
console.log(this.outtest);
console.log('test:'+this.testoutdata);
可參考vue官網的自定義事件：https://cn.vuejs.org/v2/guide/components.html#%E5%8D%95%E5%90%91%E6%95%B0%E6%8D%AE%E6%B5%81
父組件獲取子組件的data，修改但不實時更新
這邊的方法和‘子組件獲取父組件的data，修改但不實時更新'的方法一樣，其中只有傳值的方式有區別。子組件通過$emit把值傳給父組件。
以上這篇Vue 父子組件的數據傳遞、修改和更新方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
