Vue 父子組件的數據傳遞、修改和更新方法

父子組件之間的數據關系，我這邊將情況具體分成下面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 父子組件的數據傳遞、修改和更新方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com