站長(zhǎng)資訊網(wǎng)
vue實(shí)現(xiàn)雙向綁定的方法：1、利用v-model指令實(shí)現(xiàn)綁定，自定義組件上的v-model相當(dāng)于傳遞了modelValue prop并接收拋出的update:modelValue事件；2、利用vue-better-sync插件實(shí)現(xiàn)綁定；3、利用v-bind.sync修飾符，語(yǔ)法“<ChildComponent :title.sync="pageTitle" />”。
本教程操作環(huán)境：windows7系統(tǒng)、vue3版，DELL G3電腦。
Vue 實(shí)現(xiàn)雙向綁定的幾種方法
1、v-model 指令
<ChildComponent v-model="pageTitle" /> <!-- 是以下的簡(jiǎn)寫(xiě): --> <ChildComponent :value="pageTitle" @input="pageTitle = $event" />
如果要將屬性或事件名稱更改為其他名稱，則需要在 ChildComponent 組件中添加 model 選項(xiàng)：
<!-- ParentComponent.vue --> <ChildComponent v-model="pageTitle" />
// ChildComponent.vue export default { model: { prop: 'title', event: 'change' }, props: { // 這將允許 `value` 屬性用于其他用途 value: String, // 使用 `title` 代替 `value` 作為 model 的 prop title: { type: String, default: 'Default title' } } }
所以，在這個(gè)例子中 v-model 是以下的簡(jiǎn)寫(xiě)：
<ChildComponent :title="pageTitle" @change="pageTitle = $event" />
在 Vue 3.x 中，自定義組件上的 v-model 相當(dāng)于傳遞了 modelValue prop 并接收拋出的 update:modelValue 事件：
<ChildComponent v-model="pageTitle" /> <!-- 是以下的簡(jiǎn)寫(xiě): --> <ChildComponent :modelValue="pageTitle" @update:modelValue="pageTitle = $event" />
Vue3可以綁定多個(gè)v-model, 例如：<ChildComponent v-model:title="pageTitle" v-model:name="pageName" />
2、vue-better-sync 插件
有需求如此：開(kāi)發(fā)一個(gè) Prompt 組件，要求同步用戶的輸入，點(diǎn)擊按鈕可關(guān)閉彈窗。
一般我們會(huì)這樣做：
<template> <div v-show="_visible"> <div>完善個(gè)人信息</div> <div> <div>尊姓大名？</div> <input v-model="_answer" /> </div> <div> <button @click="_visible = !_visible">確認(rèn)</button> <button @click="_visible = !_visible">取消</button> </div> </div> </template> <script> export default { name: 'prompt', props: { answer: String, visible: Boolean }, computed: { _answer: { get() { return this.answer }, set(value) { this.$emit('input', value) } }, _visible: { get() { return this.visible }, set(value) { this.$emit('update:visible', value) } } } } </script>
寫(xiě)一兩個(gè)組件還好，組件規(guī)模一旦擴(kuò)大，寫(xiě)雙向綁定真能寫(xiě)出毛病來(lái)。于是，為了解放生產(chǎn)力，有了 vue-better-sync 這個(gè)輪子，且看用它如何改造我們的 Prompt 組件：
<template> <div v-show="actualVisible"> <div>完善個(gè)人信息</div> <div> <div>尊姓大名？</div> <input v-model="actualAnswer" /> </div> <div> <button @click="syncVisible(!actualVisible)">確認(rèn)</button> <button @click="syncVisible(!actualVisible)">取消</button> </div> </div> </template> <script> import VueBetterSync from 'vue-better-sync' export default { name: 'prompt', mixins: [ VueBetterSync({ prop: 'answer', // 設(shè)置 v-model 的 prop event: 'input' // 設(shè)置 v-model 的 event }) ], props: { answer: String, visible: { type: Boolean, sync: true // visible 屬性可用 .sync 雙向綁定 } } } </script>
vue-better-sync 統(tǒng)一了 v-model 和 .sync 傳遞數(shù)據(jù)的方式，你只需 this.actual${PropName} = newValue 或者 this.sync${PropName}(newValue) 即可將新數(shù)據(jù)傳遞給父組件。
GitHub：fjc0k/vue-better-sync
3、使用 v-bind.sync修飾符
在某些情況下，我們可能需要對(duì)某一個(gè) prop 進(jìn)行“雙向綁定”(除了前面用 v-model 綁定 prop 的情況)。為此，我們建議使用 update:myPropName 拋出事件。例如，對(duì)于在上一個(gè)示例中帶有 title prop 的 ChildComponent，我們可以通過(guò)下面的方式將分配新 value 的意圖傳達(dá)給父級(jí)：
this.$emit('update:title', newValue)
如果需要的話，父級(jí)可以監(jiān)聽(tīng)該事件并更新本地 data property。例如：
<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />
為了方便起見(jiàn)，我們可以使用 .sync 修飾符來(lái)縮寫(xiě)，如下所示：
<ChildComponent :title.sync="pageTitle" />
vue3 移除
.sync
【
