怎么在Vue中利用v-module實(shí)現(xiàn)雙向綁定?相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無策,為此本文總結(jié)了問題出現(xiàn)的原因和解決方法,通過這篇文章希望你能解決這個(gè)問題。
成都創(chuàng)新互聯(lián)于2013年創(chuàng)立,先為東坡等服務(wù)建站,東坡等地企業(yè),進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為東坡企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。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,可以大大提升訪問速度和用戶體驗(yàn)。
首先子組件需要一個(gè) input 標(biāo)簽,這個(gè) input 標(biāo)簽需要綁定 input 事件,$emit
觸發(fā)父組件的 input 事件,通過這種方法子組件傳遞值給父組件
<input type="text" @input="$emit('input', $event.target.value)">
父組件監(jiān)聽 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)聽 input 事件,用戶輸入字符串即可被父組件獲取到并保存在 data 狀態(tài)中
父組件傳值
然后父組件還需要將 value 值傳遞給子組件,子組件再綁定 value 值到 input 的 value 屬性上
<my-comp :value="value" @input="value = $event"></my-comp>
增加 :value="value"
通過 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)聽 input 事件而是 change 事件,也不一定是 value 屬性改變?cè)氐膬?nèi)容。比如 checkbox,我們就需要監(jiān)聽 change 事件,以及 checked 屬性。
那么先手動(dòng)實(shí)現(xiàn)一遍:
<input type="checkbox" @change="$emit('change', $event.target.checked)" :checked="checked">
子組件首先監(jiān)聽 change 事件,并 $emit
方法觸發(fā)父組件的 change 事件,將 checked 屬性值傳入給父組件;同時(shí)接收父組件傳遞進(jìn)來的 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)聽 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)雙向綁定-創(chuàng)新互聯(lián)
當(dāng)前鏈接:http://muchs.cn/article0/cdieio.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站營(yíng)銷、虛擬主機(jī)、外貿(mào)建站、做網(wǎng)站、響應(yīng)式網(wǎng)站、品牌網(wǎng)站制作
聲明:本網(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í)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容