1. 程式人生 > >關於vue對於父元件傳遞給子元件的值修改報錯Avoid mutating a prop directly since the value will be overwritten whenever

關於vue對於父元件傳遞給子元件的值修改報錯Avoid mutating a prop directly since the value will be overwritten whenever

  在一些情況下,我們可能會需要對一個 prop 進行『雙向繫結』。事實上,這正是 Vue 1.x 中的 .sync修飾符所提供的功能。當一個子元件改變了一個 prop 的值時,這個變化也會同步到父元件中所繫結的值。這很方便,但也會導致問題,因為它破壞了『單向資料流』的假設。由於子元件改變 prop 的程式碼和普通的狀態改動程式碼毫無區別,當光看子元件的程式碼時,你完全不知道它何時悄悄地改變了父元件的狀態。這在 debug 複雜結構的應用時會帶來很高的維護成本。 
上面所說的正是我們在 2.0 中移除 .sync 的理由。但是在 2.0 釋出之後的實際應用中,我們發現 .sync 還是有其適用之處,比如在開發可複用的元件庫時。我們需要做的只是讓子元件改變父元件狀態的程式碼更容易被區分。 
  從 2.3.0 起我們重新引入了 .sync 修飾符,但是這次它只是作為一個編譯時的語法糖存在。它會被擴充套件為一個自動更新父元件屬性的 v-on 偵聽器。

使用.sync方法

父元件:

<able :tableData.sync="data"></table>

子元件在堆tableData進行修改之後,需要增加一句話

this.$emit('update:tableData', newtableData)

告訴父元件,我已經修改了你給我的值啦!

另外,還可以在子元件中將父元件傳遞過來的值進行替換或者別的什麼處理,需要修改的時候不直接修改父元件的引數,而修改中間值。(這裡中間值我是直接tableData.data,如果直接用 中間值=this.tableData,可能還是會報這樣的錯誤)。所以。sync還是很靠譜的方式。

這種做法能夠實時的更新頁面的資料,而不需要重新整理頁面,很方便。