通過上一節(jié)的學(xué)習(xí)，我們了解到了在Vue的組件中數(shù)據(jù)傳遞： prop 向下傳遞，事件向上傳遞 。意思是父組件通過 prop 給子組件下發(fā)數(shù)據(jù)，子組件通過事件給父組件發(fā)送消息。但Vue中， props 是單向數(shù)據(jù)綁定，雖然在Vue 1.0版本中，通過 .sync 能實(shí)現(xiàn)雙向數(shù)據(jù)綁定。但 .sync 在幾個(gè)版本中被移除，盡管在2.3版本重新引入 .sync 修飾符，可這次引入只是作為一個(gè)編譯時(shí)的語法糖存在。如果直接使用 .sync 修飾符來做雙向數(shù)據(jù)綁定，會(huì)報(bào)警告信息。那么我們?nèi)绾卧诮M件中實(shí)現(xiàn)雙向數(shù)據(jù)綁定呢？這一節(jié)我們就來學(xué)習(xí)這方面的相關(guān)知識(shí)。

實(shí)現(xiàn)組件雙向數(shù)據(jù)綁定

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

其思路大致是這樣：

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

這樣做的好處是： 父組件數(shù)據(jù)改變時(shí)，不會(huì)修改存儲(chǔ) prop 的子組件數(shù)據(jù)，只是以子組件數(shù)據(jù)為媒介，完成對(duì) prop 的雙向修改 。

繼續(xù)拿上一節(jié)的示例來舉例，只不過接下來的示例，并沒有使用 .sync 來實(shí)現(xiàn)雙向數(shù)據(jù)綁定的效果。

修改的代碼如下：

<div id="app">
 <div class="parent">
  <h3>父組件Parent數(shù)據(jù)</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數(shù)據(jù)</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>

在上面的這個(gè)示例中，我們并沒有使用 .sync 修飾符，但在調(diào)用子組件的時(shí)候使用了 @update ：

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

子組件中渲染到HTML模板的數(shù)據(jù)是用的 prop 數(shù)據(jù)，但監(jiān)聽 input 是使用的子組件自身定義的數(shù)據(jù)作為 v-model 。這樣一來就不會(huì)直接修改 prop 。簡(jiǎn)單來說， 一切 prop 的改變從本質(zhì)上來說都由父組件完成 。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)
    }
   }
  }
 }
})

最終效果如下：

上面的示例效果，不管是修改父組件的數(shù)據(jù)還是子組件的數(shù)據(jù)，都會(huì)相互影響：

因?yàn)樽咏M件中 props 的 myName 和 myAge 不可寫，所以在 data 中創(chuàng)建一個(gè)副本 childMyName 和 childMyAge 。初始值為 props 屬性 myName 和 myAge 的值，同時(shí)在組件內(nèi)所有需要調(diào)用 props 的地方調(diào)用 data 中的 childMyName 和 childMyAge 。

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

接下來在子組件中通過 watch 來對(duì) props 屬性的 myName 和 myAge 進(jìn)行監(jiān)聽。當(dāng) props 修改后對(duì)應(yīng) data 中的副本 childMyName 和 childMyAge 也要同步數(shù)據(jù)。

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

接下來要做的事情就是當(dāng)組件內(nèi)的 props 屬性發(fā)生變化時(shí)，需要向組件外（父組件）發(fā)送通知，通知組件內(nèi)屬性變更，然后由外層（父組件）自己來決定是否變更他的數(shù)據(jù)。

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

至此，實(shí)現(xiàn)了組件內(nèi)部數(shù)據(jù)與組件外部的數(shù)據(jù)的雙向綁定，組件內(nèi)外數(shù)據(jù)的同步。簡(jiǎn)而言之： 組件內(nèi)部自已變了告訴外部，外部決定要不要變更 。

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

事實(shí)上，在Vue中，雙向綁定的 props 是不利于組件間的數(shù)據(jù)狀態(tài)管理，尤其是較為復(fù)雜的業(yè)務(wù)當(dāng)中，因此在實(shí)際項(xiàng)目中應(yīng)該盡量少用雙向綁定，過于復(fù)雜的數(shù)據(jù)處理，建議使用 Vuex 。但很多時(shí)候又避免不了使用雙向綁定。那么什么場(chǎng)景之下使用 props 來做雙向綁定呢？

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

• 組件內(nèi)部需要修改 props
• 組件需要可以由外部在運(yùn)行時(shí)動(dòng)態(tài)控制，而非單純的初始化
• 組件父部需要讀取組件內(nèi)的狀態(tài)來進(jìn)行處理

雖然上面的示例展示了我們?cè)趺丛赩ue 2.0中實(shí)現(xiàn) props 的雙向綁定，但如果項(xiàng)目中有更多這樣的雙向綁定，那么就會(huì)讓你做一些重復(fù)的事情，而且代碼也很冗余，事情也會(huì)變得復(fù)雜。為了改變這樣的現(xiàn)象，可以借助Vue的 mixin 來自動(dòng)化處理 props 的雙向綁定的需求。不過在這節(jié)中，我們不會(huì)學(xué)習(xí)這方面的知識(shí)，后面我們?cè)趯W(xué)習(xí) mixin 時(shí)，可地再回過頭來實(shí)現(xiàn)這樣的功能。

在Vue中除了上述介紹的組件通訊之外，還有其他一些方法，在下一節(jié)中，咱們將會(huì)繼續(xù)學(xué)習(xí)這方面的知識(shí)。

總結(jié)

以上所述是小編給大家介紹的Vue2.0實(shí)現(xiàn)組件數(shù)據(jù)的雙向綁定問題，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論