Vue3 组件通信: 用 v-model 实现父子组件数据同步

前端

2022-12-29 21:33:37

使用 Vue3 中的 v-model 实现父子组件通信

v-model 的作用

在 Vue3 的组件架构中，父组件与子组件之间的数据传递至关重要。v-model 便是一种实现父子组件数据通信的强大工具，它允许在子组件中轻松绑定父组件数据，从而实现数据双向同步。

v-model 的使用

使用 v-model 实现父子组件通信需要在子组件中同时绑定属性和自定义事件：

绑定属性： 在子组件标签上使用 v-model 指令，例如<input v-model="value" />，其中 "value" 是要绑定的父组件属性。
自定义事件： 子组件使用 defineEmits 方法定义自定义事件，例如<script>emits: defineEmits(['input']),</script>，其中 "input" 是自定义事件名称。

v-model 的原理

v-model 的运作原理是通过 "modelValue" 属性。当子组件使用 v-model 绑定父组件数据时，Vue 将自动创建一个 "modelValue" 属性，其值与父组件数据同步。子组件中的数据改变时，"modelValue" 也随之更新，从而触发自定义事件，最终更新父组件数据。

v-model 的优势

使用 v-model 来实现父子组件通信具有以下优势：

简洁性： 使用 v-model 只需绑定属性和自定义事件，代码简洁。
双向同步： 数据双向同步，子组件数据改变时父组件数据也会同步更新。
类型安全： v-model 支持类型校验，确保子组件数据类型与父组件属性类型一致。

代码示例

子组件代码：

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

<script>
import { defineProps, defineEmits } from 'vue'

export default {
  props: defineProps(['value']),
  emits: defineEmits(['input']),
  setup(props, { emit }) {
    const handleChange = (e) => {
      emit('input', e.target.value)
    }

    return {
      handleChange,
    }
  },
}
</script>

父组件代码：

<template>
  <MyChildComponent v-model="message" />
</template>

<script>
import MyChildComponent from './MyChildComponent.vue'

export default {
  components: { MyChildComponent },
  data() {
    return {
      message: 'Hello Vue!',
    }
  },
}
</script>