自定義Vue中的v-module雙向綁定的實(shí)現(xiàn)
v-module 雙向綁定實(shí)際上就是通過子組件中的 $emit 方法派發(fā) input 事件，父組件監(jiān)聽 input 事件中傳遞的 value 值，并存儲(chǔ)在父組件 data 中；然后父組件再通過 prop 的形式傳遞給子組件 value 值，再子組件中綁定 input 的 value 屬性即可。
我們著手實(shí)現(xià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'
}
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue獲取頁面元素的相對(duì)位置的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
詳解如何在Vue項(xiàng)目中導(dǎo)出Excel
這篇文章主要介紹了如何在Vue項(xiàng)目中導(dǎo)出Excel，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
本文主要介紹了vue-admin-template解決登錄和跨域問題解決，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
這篇文章主要給大家介紹了關(guān)于vue中watch和computed區(qū)別的相關(guān)資料,computed和watch都是vue框架中的用于監(jiān)聽數(shù)據(jù)變化的屬性,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
Vue3中實(shí)現(xiàn)微信掃碼登錄的步驟和代碼示例
在 Vue 3 中實(shí)現(xiàn)微信掃碼登錄,涉及到前端生成二維碼、監(jiān)聽微信回調(diào)以及與后端的交互,本文給大家介紹了一個(gè)詳細(xì)的實(shí)現(xiàn)步驟和代碼示例,對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-07-07
vue靜態(tài)界面之左二級(jí)菜單右表單表格的實(shí)例代碼
這篇文章主要介紹了vue靜態(tài)界面之左二級(jí)菜單右表單表格，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08
基于vue2.0實(shí)現(xiàn)仿百度前端分頁效果附實(shí)現(xiàn)代碼
本文通過實(shí)例代碼給大家介紹了基于vue2.0實(shí)現(xiàn)仿百度前端分頁效果,在文中給大家記錄了遇到的問題及解決方法，需要的朋友可以參考下2018-10-10
在現(xiàn)代社會(huì)中,了解血型遺傳規(guī)律對(duì)于優(yōu)生優(yōu)育、醫(yī)療健康等方面都有重要意義,本文將介紹如何使用Uniapp開發(fā)一個(gè)跨平臺(tái)的血型遺傳查詢工具,幫助用戶預(yù)測(cè)孩子可能的血型,感興趣的朋友一起看看吧2025-04-04
這篇文章主要介紹了詳解如何用模塊化的方式寫vuejs，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12
Vue-router 中hash模式和history模式的區(qū)別
這篇文章主要介紹了Vue-router 中hash模式和history模式的區(qū)別，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07