vue2.0子元件修改父元件資料

夏君發表於2019-02-16
Vue元件

從vue1.0升級至2.0之後 prop的.sync被去除 因此直接在子元件修改父元件的值是會報錯的 目的是為了阻止子元件影響父元件的資料
那麼在vue2.0之後 如何在子元件修改父元件props傳過來的值呢？
思路是通過子元件$emit發射一個方法

$emit(`increment`,val);

在父元件使用子元件的地方用v-on繫結這個自定義事件

<button-counter v-on:increment="incrementTotal"></button-counter>

然後在父元件定義這個方法

methods:{
  incrementTotal(val) {
      this.val = val;
    } 
}

雖然這種方式可以修改父元件資料，但是官方是不推薦在元件內修改通過props傳入的父元件資料，而是推薦使用vuex

相關文章