拥抱进化：Vue 3 中 v-model 的革新，自定义组件双向绑定的简化之路

2023-09-24 07:00:15

Vue 3 中 v-model 的演进

在 Vue.js 的世界中，v-model 作为双向数据绑定的核心特性，始终扮演着至关重要的角色。在 Vue 3 中，v-model 迎来了重大进化，为开发人员提供了更灵活、更强大的方式来处理双向绑定。

defineModel：自定义组件的双向绑定神器

在 Vue 3 中，defineModel 方法的引入彻底改变了自定义组件中双向绑定的实现方式。传统的双向绑定需要通过 props 和 emits 进行繁琐的配置，而 defineModel 提供了一种简洁、声明式的解决方案。

在子组件中使用 defineModel，您可以直接访问父组件中与 v-model 绑定的值，并对其进行修改。defineModel 返回一个对象，包含两个属性：value 和 update。value 属性代表父组件传递给子组件的绑定值，而 update 属性是一个更新回调，用于向父组件传递修改后的值。

<template>
  <input v-model="counter" />
</template>

<script>
import { defineModel } from 'vue';

export default {
  setup() {
    const counter = defineModel(() => 0, (value) => { this.count++ });
    return {
      counter,
      count: 0,
    };
  },
};
</script>

通过这种方式，您可以轻松地在自定义组件中实现双向绑定，而无需手动管理 props 和 emits。

v-model 在表单元素中的应用

v-model 在表单元素中的应用非常广泛，它允许表单元素的值与 Vue 组件的数据模型进行双向绑定。

<input v-model="username" />

在这个示例中，输入框的值将与 username 数据属性绑定。当用户在输入框中输入文本时，username 数据属性的值将自动更新。同样，如果 username 数据属性的值发生变化，输入框中的文本也将更新。

理解双向绑定的工作原理

双向绑定的工作原理依赖于 Vue.js 的响应式系统。当使用 v-model 时，Vue 会自动将表单元素的值与数据模型关联起来。当表单元素的值发生变化时，Vue 会检测到此更改并触发数据模型的更新。反之亦然，当数据模型的值发生变化时，Vue 会更新表单元素的值。

自定义组件双向绑定的实现

在自定义组件中实现双向绑定，可以通过 props 和 emits 来实现。子组件接收父组件传递的属性值，并通过 emits 来触发父组件的事件，从而更新父组件的数据模型。

<!-- 子组件 -->
<template>
  <input v-model="count" />
</template>

<script>
export default {
  props: ['count'],
  emits: ['update:count'],
};
</script>

<!-- 父组件 -->
<template>
  <MyComponent v-model="counter" />
</template>

<script>
export default {
  data() {
    return {
      counter: 0,
    };
  },
};
</script>