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把值傳給父元件。