怎么在Vue中利用v-module實現(xiàn)雙向綁定？相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

成都創(chuàng)新互聯(lián)于2013年創(chuàng)立，先為東坡等服務建站，東坡等地企業(yè)，進行企業(yè)商務咨詢服務。為東坡企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務解決您的所有建站問題。Vue的優(yōu)點

Vue具體輕量級框架、簡單易學、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結構的分離、虛擬DOM、運行速度快等優(yōu)勢，Vue中頁面使用的是局部刷新，不用每次跳轉頁面都要請求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗。

首先子組件需要一個 input 標簽，這個 input 標簽需要綁定 input 事件，$emit 觸發(fā)父組件的 input 事件，通過這種方法子組件傳遞值給父組件

父組件監(jiān)聽 input 事件，然后將事件攜帶的 input 輸入的值傳入到 data 狀態(tài)中

export default {
 // ...
 data () {
  return {
   value: 'initial value' // 維護一個 value 狀態(tài)
  }
 }
}

至此子組件監(jiān)聽 input 事件，用戶輸入字符串即可被父組件獲取到并保存在 data 狀態(tài)中

父組件傳值

然后父組件還需要將 value 值傳遞給子組件，子組件再綁定 value 值到 input 的 value 屬性上

增加 :value="value" 通過 prop 傳遞 value

子組件中綁定 input 的 value 屬性

注意 props 中需要設定 value

export default {
 name: 'MyComp',
 props: ['value']
}

至此自定義的 v-module 處理完畢，看看效果：

其他元素使用 v-model

在 input 上使用 v-model 比較簡單，但考慮到其他元素不一定是要監(jiān)聽 input 事件而是 change 事件，也不一定是 value 屬性改變元素的內(nèi)容。比如 checkbox，我們就需要監(jiān)聽 change 事件，以及 checked 屬性。

那么先手動實現(xiàn)一遍：

子組件首先監(jiān)聽 change 事件，并 $emit 方法觸發(fā)父組件的 change 事件，將 checked 屬性值傳入給父組件；同時接收父組件傳遞進來的 checked 值，根據(jù) checked 值決定 input 元素的 checked 屬性。

export default {
 name: 'MyComp',
 props: ['checked']
}

然后需要修改父組件：

export default {
  // ...
 data () {
  return {
   checked: false
  }
 }
}

父組件監(jiān)聽 change 事件，并在 data 中維護狀態(tài) checked，默認值為 false

最后看看效果：

直接使用 v-model 指令

此外還可直接使用 v-model 指令：

但需要在組件中修改 v-model 指令，指定 prop 和 event：

export default {
 name: 'MyComp',
 props: ['checked'],
 model: {
  prop: 'checked',
  event: 'change'
 }
}

看完上述內(nèi)容，你們掌握怎么在Vue中利用v-module實現(xiàn)雙向綁定的方法了嗎？如果還想學到更多技能或想了解更多相關內(nèi)容，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

分享題目：怎么在Vue中利用v-module實現(xiàn)雙向綁定-創(chuàng)新互聯(lián)
轉載來于：http://weahome.cn/article/cdieio.html