通過上一節的學習，我們了解到了在Vue的組件中數據傳遞： prop 向下傳遞，事件向上傳遞 。意思是父組件通過 prop 給子組件下發數據，子組件通過事件給父組件發送消息。但Vue中， props 是單向數據綁定，雖然在Vue 1.0版本中，通過 .sync 能實現雙向數據綁定。但 .sync 在幾個版本中被移除，盡管在2.3版本重新引入 .sync 修飾符，可這次引入只是作為一個編譯時的語法糖存在。如果直接使用 .sync 修飾符來做雙向數據綁定，會報警告信息。那么我們如何在組件中實現雙向數據綁定呢？這一節我們就來學習這方面的相關知識。

實現組件雙向數據綁定

在上一節中最后的示例使用的是Vue 1.0版本中的 .sync 實現數據雙向綁定。那我們先來看看拋棄 .sync 修飾符來實現組件雙向數據綁定的工作： 通過Vue提供的機制，繞開直接修改 prop 來實現組件雙向數據綁定 。

其思路大致是這樣：

• 在數據渲染時使用 prop 渲染數據
  
• 將 prop 綁定到子組件自身的數據上，修改數據時修改自身數據來替代 prop
  
• watch 子組件自身數據的改變，觸發事件通知父組件更改綁定到 prop 的數據
  

這樣做的好處是： 父組件數據改變時，不會修改存儲 prop 的子組件數據，只是以子組件數據為媒介，完成對 prop 的雙向修改 。

繼續拿上一節的示例來舉例，只不過接下來的示例，并沒有使用 .sync 來實現雙向數據綁定的效果。

修改的代碼如下：

<div id="app"> <div class="parent">  <h3>父組件Parent數據</h3>  <ul>   <li>    <label>姓名:</label>    <span>{{ name }}</span>    <input type="text" v-model="name" />   </li>   <li>    <label>年齡:</label>    <span>{{ age }}</span>    <input type="number" v-model="age" />   </li>  </ul> </div> <child :my-name="name" :my-age="age" @update:my-name="val => name = val" @update:my-age="val => age = val"></child></div><template id="child"> <div class="child">  <h3>子組件child數據</h3>  <ul>   <li>    <label>姓名</label>    <span>{{ myName }}</span>    <input type="text" v-model="childMyName" />   </li>   <li>    <label>年齡</label>    <span>{{ myAge }}</span>    <input type="number" v-model="childMyAge" />   </li>  </ul> </div></template>

在上面的這個示例中，我們并沒有使用 .sync 修飾符，但在調用子組件的時候使用了 @update ：

<child :my-name="name" :my-age="age" @update:my-name="val => name = val" @update:my-age="val => age = val"></child>

子組件中渲染到HTML模板的數據是用的 prop 數據，但監聽 input 是使用的子組件自身定義的數據作為 v-model 。這樣一來就不會直接修改 prop 。簡單來說， 一切 prop 的改變從本質上來說都由父組件完成 。JavaScript的代碼如下：

let parent = new Vue({ el: '#app', data () {  return {   name: 'w3cplus',   age: 7  } }, components: {  'child': {   template: '#child',   props: ['myName', 'myAge'],   data () {    return {     childMyName: this.myName,     childMyAge: this.myAge    }   },   watch: {    childMyName: function (val) {     this.$emit('update:my-name', val)    },    childMyAge: function (val) {     this.$emit('update:my-age', val)    }   }  } }})

最終效果如下：

上面的示例效果，不管是修改父組件的數據還是子組件的數據，都會相互影響：

因為子組件中 props 的 myName 和 myAge 不可寫，所以在 data 中創建一個副本 childMyName 和 childMyAge 。初始值為 props 屬性 myName 和 myAge 的值，同時在組件內所有需要調用 props 的地方調用 data 中的 childMyName 和 childMyAge 。

components: { 'child': {  template: '#child',  props: ['myName', 'myAge'],  data () {   return {    childMyName: this.myName,    childMyAge: this.myAge   }  },  ... }}

接下來在子組件中通過 watch 來對 props 屬性的 myName 和 myAge 進行監聽。當 props 修改后對應 data 中的副本 childMyName 和 childMyAge 也要同步數據。

...watch: { childMyName: function (val) {  this.$emit('update:my-name', val) }, childMyAge: function (val) {  this.$emit('update:my-age', val) }}...

接下來要做的事情就是當組件內的 props 屬性發生變化時，需要向組件外（父組件）發送通知，通知組件內屬性變更，然后由外層（父組件）自己來決定是否變更他的數據。

接下來我們按上面的方案來改造上一節示例中的switch按鈕。

至此，實現了組件內部數據與組件外部的數據的雙向綁定，組件內外數據的同步。簡而言之： 組件內部自已變了告訴外部，外部決定要不要變更 。

什么樣的 props 適合做雙向綁定

事實上，在Vue中，雙向綁定的 props 是不利于組件間的數據狀態管理，尤其是較為復雜的業務當中，因此在實際項目中應該盡量少用雙向綁定，過于復雜的數據處理，建議使用 Vuex 。但很多時候又避免不了使用雙向綁定。那么什么場景之下使用 props 來做雙向綁定呢？

如果在你的項目中，同時滿足下面的條件時，我們就可以考慮使用 props 來做雙向綁定：

• 組件內部需要修改 props
• 組件需要可以由外部在運行時動態控制，而非單純的初始化
• 組件父部需要讀取組件內的狀態來進行處理

雖然上面的示例展示了我們怎么在Vue 2.0中實現 props 的雙向綁定，但如果項目中有更多這樣的雙向綁定，那么就會讓你做一些重復的事情，而且代碼也很冗余，事情也會變得復雜。為了改變這樣的現象，可以借助Vue的 mixin 來自動化處理 props 的雙向綁定的需求。不過在這節中，我們不會學習這方面的知識，后面我們在學習 mixin 時，可地再回過頭來實現這樣的功能。

在Vue中除了上述介紹的組件通訊之外，還有其他一些方法，在下一節中，咱們將會繼續學習這方面的知識。

總結

以上所述是小編給大家介紹的Vue2.0實現組件數據的雙向綁定問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！