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

創(chuàng)新互聯(lián)公司是一家專業(yè)提供高港企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、成都h5網(wǎng)站建設(shè)、小程序制作等業(yè)務(wù)。10年已為高港眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站設(shè)計(jì)公司優(yōu)惠進(jìn)行中。

Vue的優(yōu)點(diǎn)

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

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

<input type="text" @input="$emit('input', $event.target.value)">

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

<my-comp @input="value = $event"></my-comp>

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

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

父組件傳值

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

<my-comp :value="value" @input="value = $event"></my-comp>

增加 :value="value" 通過(guò) prop 傳遞 value

子組件中綁定 input 的 value 屬性

<input type="text" @input="$emit('input', $event.target.value)" :value="value">

注意 props 中需要設(shè)定 value

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

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

其他元素使用 v-model

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

那么先手動(dòng)實(shí)現(xiàn)一遍：

<input type="checkbox" @change="$emit('change', $event.target.checked)" :checked="checked">

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

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

然后需要修改父組件：

<my-comp @change="checked = $event"></my-comp>

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

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

最后看看效果：

直接使用 v-model 指令

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

<my-comp v-model="checked"></my-comp>

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

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

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

本文標(biāo)題：怎么在Vue中利用v-module實(shí)現(xiàn)雙向綁定
URL地址：http://jinyejixie.com/article12/psiggc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、虛擬主機(jī)、用戶體驗(yàn)、網(wǎng)站設(shè)計(jì)、軟件開(kāi)發(fā)、網(wǎng)頁(yè)設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)