在Vue中父子元件的資料傳遞、修改和更新是如何實現的（詳細教學）-js教程-PHP中文網

在Vue中父子元件的資料傳遞、修改和更新是如何實現的（詳細教學）

亚连

發布： 2018-06-02 10:33:36

原創

5268 人瀏覽過

下面我就為大家分享一篇Vue 父子元件的資料傳遞、修改和更新方法，具有很好的參考價值，希望對大家有幫助。

父子元件之間的資料關係，我這邊將情況具體分成下面4種：

##父元件修改子元件的data，並即時更新

子元件通過$emit傳遞子元件的數據，this.$data指目前元件的data(return{...})裡的所有數據，

this.$emit(&#39;data&#39;,this.$data);

登入後複製

之後透過父元件的getinputdata方法來接收資料

@data=&#39;getinputdata&#39;

登入後複製

其中的data就是傳過來的數據，透過修改這個資料就可以透過父元件即時更新子元件

getinputdata(data) {
 console.log(data);
 data.background = {
  backgroundColor: &#39;yellow&#39;,
  border: &#39;none&#39;
 };
}

登入後複製

子元件修改父元件的data

在子元件中是修改不了父元件的data的，只有透過上面的$emit方法在父元件中修改資料。

可參考vue官網的自訂事件：https://cn.vuejs.org/v2/guide/components.html#自訂事件

子元件取得父元件的data，修改但不實時更新

1. 子組件將父組件通過props傳遞的數據，再把props的值賦給let或var聲明變量，之後使用這個變量就可以了。

let test = this.testoutdata;
test++;
console.log(test);
console.log(&#39;test:&#39;+this.testoutdata);

登入後複製

2. 子元件將父元件透過props傳遞的數據，再把props的值賦給data(return{...})裡的變量，之後再用這個變數就可以了。

this.outtest++;
console.log(this.outtest);
console.log(&#39;test:&#39;+this.testoutdata);

登入後複製

可參考vue官網的自訂事件：https://cn.vuejs.org/v2/guide/components.html#單向資料流

##父元件獲取子元件的data，修改但不即時更新

這邊的方法和'子元件取得父元件的data，修改但不即時更新'的方法一樣，其中只有傳值的方式有區別。子元件透過$emit把值傳給父元件。

上面是我整理給大家的，希望今後對大家有幫助。

Vue.js自訂事件的表單輸入元件方法

vue.js移動陣列位置,同時更新視圖的方法

vue.js或js實作中文A-Z排序的方法

以上是在Vue中父子元件的資料傳遞、修改和更新是如何實現的（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！