vue3-深入组件-组件 v-model

在Vue 3中，v-model实现了双向绑定，它是一种语法糖，它将 value 与 input 或 change 事件相结合。

在自定义组件中使用 v-model，你需要确保你的组件可以接收一个 modelValue 的 prop 并且发出 update:modelValue 事件。

以下是一个简单的例子：

<template>
  <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
</template>
 
<script>
export default {
  props: {
    modelValue: String, // 使用props接收v-model的值
  },
  emits: ['update:modelValue'], // 声明组件可以发出的事件
};
</script>

在父组件中使用这个自定义输入组件时，你可以这样使用 v-model：

<template>
  <CustomInput v-model="inputValue" />
</template>
 
<script>
import CustomInput from './CustomInput.vue';
 
export default {
  components: {
    CustomInput,
  },
  data() {
    return {
      inputValue: '', // 绑定的数据
    };
  },
};
</script>

在这个例子中，CustomInput 组件接收一个名为 modelValue 的 prop，并且当输入框的值发生变化时，它会发出一个名为 update:modelValue 的事件，带有新的值。在父组件中，v-model 将 inputValue 绑定到 CustomInput 组件，并在用户交互时自动更新 inputValue。