vue3进阶-自定义组件双向绑定（props-modelValue）

在 Vue 3 中，双向绑定是一个非常重要的特性，它允许我们方便地在组件之间同步数据。Vue 3 引入了 modelValue 属性来支持组件的双向绑定，这对于创建自定义表单控件尤其有用。

本文将详细介绍如何在 Vue 3 中使用 modelValue 实现自定义组件的双向绑定，并通过一个具体的案例来演示这一过程。

Vue 3 中的 modelValue

在 Vue 3 中，自定义组件可以通过 modelValue 属性来支持双向绑定。modelValue 是 Vue 3 专门为 v-model 指令设计的属性，它允许组件接收一个值，并在内部对其进行操作。当组件内部的状态发生变化时，组件应该通过 $emit 触发 update:modelValue 事件来通知父组件更新这个值。

案例：自定义输入框组件

我们将创建一个自定义的输入框组件，它支持 v-model 双向绑定。这个组件将接收一个 modelValue 属性，并在输入框的值发生变化时通过 update:modelValue 事件通知父组件。

Step 1: 创建自定义输入框组件 CustomInput.vue

<template>
  <div class="custom-input">
    <input :value="localValue" @input="handleInput" />
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
// 接收父组件传来的 modelValue 
// modelValue为约定俗成字段，就是父组件传来的v-model绑定的值
const props = defineProps({
  modelValue: {
    type: [String, Number],
    default: ''
  }
});
// update:modelValue也是固定的
const emit = defineEmits(['update:modelValue']);
// 本地状态
const localValue = ref(props.modelValue);
// 当父组件的 modelValue 发生变化时，更新本地状态
watch(
  () => props.modelValue,
  newValue => {
    localValue.value = newValue;
  }
);
// 当 input 的值发生变化时，通知父组件
const handleInput = (event) => {
  emit('update:modelValue', event.target.value);
};
</script>

<style scoped>
.custom-input {
  /* 样式 */
}
</style>

在这个组件中：

1. 接收 modelValue 属性：通过 defineProps 接收父组件传递的 modelValue。

2. 本地状态：使用 ref 来管理本地状态 localValue。

3. 监听 modelValue 的变化：使用 watch 监听 modelValue 的变化，并更新本地状态。

4. 触发 update:modelValue 事件：当输入框的值发生变化时，通过 $emit 触发 update:modelValue 事件，并传递新的值给父组件。

Step 2: 在父组件中使用自定义输入框组件

接下来，在父组件中使用这个自定义输入框组件，并通过 v-model 实现双向绑定。

<template>
  <div id="app">
    <h1>Parent Component</h1>
    <p>Message from parent: {{ message }}</p>
    <CustomInput v-model="message" />
  </div>
</template>
<script setup>
import { ref } from 'vue';
import CustomInput from './CustomInput.vue';
const message = ref('Hello from parent.');
</script>

<style>
/* 样式 */
</style>

在这个父组件中：

1. 定义响应式数据：使用 ref 创建一个响应式数据 message。

2. 使用 v-model 实现双向绑定：通过 v-model 将 message 绑定到 CustomInput 组件上。

如何使用 modelValue

当你在自定义组件中使用 modelValue 时，需要注意以下几点：

1. 接收 modelValue 属性：通过 defineProps 定义 modelValue 属性。

2. 触发 update:modelValue 事件：当需要更新父组件中的值时，通过 $emit 触发 update:modelValue 事件，并传递新的值。

总结

通过使用 modelValue 和 update:modelValue 事件，可以轻松地在 Vue 3 中创建支持双向绑定的自定义组件。这种方式不仅简化了组件之间的数据传递，还使得组件的设计更加模块化和易于维护。