Vue 父子元件的資料傳遞、修改和更新
阿新 • • 發佈:2018-12-12
父子元件之間的資料關係,我這邊將情況具體分成下面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把值傳給父元件。