vue实现双向绑定的方法：1、利用v-model指令实现绑定，自定义组件上的v-model相当于传递了modelValue prop并接收抛出的update:modelValue事件；2、利用vue-better-sync插件实现绑定；3、利用v-bind.sync修饰符，语法“<ChildComponent :title.sync="pageTitle" />”。
本教程操作环境：windows7系统、vue3版，DELL G3电脑。
Vue 实现双向绑定的几种方法
1、v-model 指令
<ChildComponent v-model="pageTitle" /> <!-- 是以下的简写: --> <ChildComponent :value="pageTitle" @input="pageTitle = $event" />
如果要将属性或事件名称更改为其他名称，则需要在 ChildComponent 组件中添加 model 选项：
<!-- 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'
}
}
}所以，在这个例子中 v-model 是以下的简写：
<ChildComponent :title="pageTitle" @change="pageTitle = $event" />
在 Vue 3.x 中，自定义组件上的 v-model 相当于传递了 modelValue prop 并接收抛出的 update:modelValue 事件：
立即学习“前端免费学习笔记（深入）”；
<ChildComponent v-model="pageTitle" /> <!-- 是以下的简写: --> <ChildComponent :modelValue="pageTitle" @update:modelValue="pageTitle = $event" />
Vue3可以绑定多个v-model, 例如：<ChildComponent v-model:title="pageTitle" v-model:name="pageName" />
2、vue-better-sync 插件
有需求如此：开发一个 Prompt 组件，要求同步用户的输入，点击按钮可关闭弹窗。
一般我们会这样做：
<template>
<div v-show="_visible">
<div>完善个人信息</div>
<div>
<div>尊姓大名？</div>
<input v-model="_answer" />
</div>
<div>
<button @click="_visible = !_visible">确认</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>写一两个组件还好，组件规模一旦扩大，写双向绑定真能写出毛病来。于是，为了解放生产力，有了 vue-better-sync 这个轮子，且看用它如何改造我们的 Prompt 组件：
<template>
<div v-show="actualVisible">
<div>完善个人信息</div>
<div>
<div>尊姓大名？</div>
<input v-model="actualAnswer" />
</div>
<div>
<button @click="syncVisible(!actualVisible)">确认</button>
<button @click="syncVisible(!actualVisible)">取消</button>
</div>
</div>
</template>
<script>
import VueBetterSync from 'vue-better-sync'
export default {
name: 'prompt',
mixins: [
VueBetterSync({
prop: 'answer', // 设置 v-model 的 prop
event: 'input' // 设置 v-model 的 event
})
],
props: {
answer: String,
visible: {
type: Boolean,
sync: true // visible 属性可用 .sync 双向绑定
}
}
}
</script>vue-better-sync 统一了 v-model 和 .sync 传递数据的方式，你只需 this.actual${PropName} = newValue 或者 this.sync${PropName}(newValue) 即可将新数据传递给父组件。
GitHub：fjc0k/vue-better-sync
3、使用 v-bind.sync修饰符
在某些情况下，我们可能需要对某一个 prop 进行“双向绑定”(除了前面用 v-model 绑定 prop 的情况)。为此，我们建议使用 update:myPropName 抛出事件。例如，对于在上一个示例中带有 title prop 的 ChildComponent，我们可以通过下面的方式将分配新 value 的意图传达给父级：
this.$emit('update:title', newValue)如果需要的话，父级可以监听该事件并更新本地 data property。例如：
<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />
为了方便起见，我们可以使用 .sync 修饰符来缩写，如下所示：
<ChildComponent :title.sync="pageTitle" />
vue3 移除
.sync
