概述

最近在用muse ui的時候碰到一個問題，簡單來說是這樣的，父子之間傳值，父組件和子組件使用相同的props命名，並且子組件不用emit，而用等號賦值。

最後使用計算屬性的setter函數解決了，記錄下來，供以後開發時參考，相信對其他人也有用。

父子組件傳值

根據官方文檔裏面對於sync的描述，可以使用如下方法進行父子組件的傳值。

1.父組件在調用子組件的時候使用sync。

<text-document :childTitle.sync="title"></text-document>

上面的代碼會被vue處理成下面的形式：

<text-document
  :childTitle="title"
  @update:childTitle="this.title=$event">
</text-document>
 

2.子組件在定義的時候使用childTitle和emit。在子組件定義的時候，通過props把childTitle傳進去就可以使用了，然後通過emit來更新childTitle的值。使用emit的語法如下：

this.$emit('update:childTitle', val);

遇到的問題

一般情況下，使用上面的方法來進行父子組件互相傳值已經足夠了，但是如果需要加上下面2個條件呢：

1. 父子組件的變量使用相同的命名。
2. 子組件不使用emit，而是使用等號進行更新。

對於問題1，直接用相同的命名即可，沒有任何問題；但是對於問題2，如果用等號更新的話，開發者工具裏面就會報錯：不能改變props裏面的值。

解決方法

於是我們考慮使用setter來設置一個中間變量，在修改這個變量的時候順帶使用emit修改父組件傳進來的值。代碼如下：

  // 省略了其他內容
  props: ['childTitle'],
  computed: {
    title: {
      get: function() {
        return this.childTitle;
      },
      set: function(val) {
        this.$emit('update:childTitle', val);
      }
    }
  }

問題思考

1.vue就是通過這個原理來更新的。
2.可以考慮寫一個vue庫或者npm庫，把emit響應轉化為等號賦值。

在vue中使用setter改寫父子組件傳的值