本教程操作环境：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.vueexport 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

以上就是vue实现双向绑定有哪几个方法的详细内容，更多请关注php中文网其它相关文章！

推荐内容