Vue 3 中使用 v-model 指令实现父子组件双向数据绑定

本文由AI辅助撰写，可能存在不准确之处，请读者注意甄别！

在 Vue 框架中，组件间数据的双向绑定是一项重要功能，这直接影响到状态管理的便捷程度。本文旨在详细解读 Vue 3 中 v-model 的使用与变化，并通过示例指导如何实现高效的双向数据绑定。

更新前的概述

Vue 2.x 的 v-model 指令以一个简化的方式帮助我们快速实现父子组件的双向绑定。然而，Vue 3 引入重大更改，使其更具通用性和灵活性。

Vue 3 中的 v-model

在 Vue 3 中，v-model 指令被升级，其背后机理涉及到 v-bind 和 v-on 的组合。具体来讲：

• 命名规范上的变化： 我们须使用 modelValue 作为默认的 prop 名称，并用 update:modelValue 来代替原先的 input 事件。
• 可定制化增强： 组件开发者可以指定绑定的属性和事件名称，使得同一个子组件可以搭载多个 v-model 实例。

具体实现方法

以下是一个实现双向数据绑定的示例，它展示了如何在 Vue 3 框架下，结合父子组件实现该功能。

父组件实现

<template>
  <ChildComponent v-model="parentValue" />
</template>

<script>
import { defineComponent, ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default defineComponent({
  components: { ChildComponent },
  setup() {
    const parentValue = ref(0); // 初始化一个响应式的父组件数据
    return { parentValue };
  },
});
</script>

在此简化示例中，我们使用 v-model 属性绑定了一个名为 parentValue 的响应式数据。

子组件实现

<template>
  <button @click="increment">{{ modelValue }}</button>
</template>

<script>
import { defineComponent, ref, toRefs } from 'vue';

export default defineComponent({
  props: {
    modelValue: Number // 接收从父组件传递来的值
  },
  emits: ['update:modelValue'], // 明确哪个事件会被触发
  setup(props, { emit }) {
    const { modelValue } = toRefs(props); // 使用 toRefs 以保持响应性
    const increment = () => {
      emit('update:modelValue', modelValue.value + 1); // 当按钮点击，触发事件并更新父组件的值
    };
    return { increment, modelValue };
  },
});
</script>

子组件通过定义 modelValue prop 接收父组件中的值，并在内部定义了 increment 函数来处理按钮点击事件，从而通过 $emit 触发 update:modelValue 事件，并传回新值。

要点归纳

• 使用 modelValue 作为默认的 prop 名称和 update:modelValue 作为事件名，以支持 v-model 的双向数据绑定。
• 利用 Vue 3 提供的组合式 API 进行组件内部状态管理和事件派发。
• 明确子组件通过 $emit 方法与父组件进行通信，以实现双向绑定的核心机制。

综上，我们展示了 Vue 3 中双向数据绑定的实现方式。通过理解并运用这一模式，开发人员可以在父子组件间建立强大而灵活的数据通信通道。

参考资料：

Vue 2与Vue 3在自定义组件v-model上的区别 - 韩小韩博客 - 要变得更加完美。

版权属于：soarli

本文链接：https://blog.soarli.top/archives/708.html

转载时须注明出处及本声明。