soarli

Vue 3 中使用 v-model 指令实现父子组件双向数据绑定
本文由AI辅助撰写,可能存在不准确之处,请读者注意甄别!在 Vue 框架中,组件间数据的双向绑定是一项重要功能,这...
扫描右侧二维码阅读全文
29
2023/12

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-bindv-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上的区别 - 韩小韩博客 - 要变得更加完美。

最后修改:2023 年 12 月 29 日 03 : 23 AM

发表评论