真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

重慶分公司 重慶分公司

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動態(tài)
• 成功案例
• 關(guān)于我們
028-86922220

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動態(tài)
• 成功案例
• 關(guān)于我們

 
  
父組件Parent數(shù)據(jù)
  

   

    姓名:
    {{ name }}
    
   
   

    年齡:
    {{ age }}
    
   
  
 

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

 name = val" @update:my-age="val => age = val">

子組件中渲染到HTML模板的數(shù)據(jù)是用的 prop 數(shù)據(jù)，但監(jiān)聽 input 是使用的子組件自身定義的數(shù)據(jù)作為 v-model 。這樣一來就不會直接修改 prop 。簡單來說， 一切 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ù)，都會相互影響：

因為子組件中 props 的 myName 和 myAge 不可寫，所以在 data 中創(chuàng)建一個副本 childMyName 和 childMyAge 。初始值為 props 屬性 myName 和 myAge 的值，同時在組件內(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 來對 props 屬性的 myName 和 myAge 進行監(jiān)聽。當 props 修改后對應(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)
 }
}
...

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

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

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

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

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

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

• 組件內(nèi)部需要修改 props

• 組件需要可以由外部在運行時動態(tài)控制，而非單純的初始化

• 組件父部需要讀取組件內(nèi)的狀態(tài)來進行處理

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

到此，相信大家對“Vue中如何實現(xiàn)數(shù)據(jù)的雙向綁定”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學(xué)習！