vue3 组件 v-model

在 Vue3 中，组件的 v-model 指令可以通过 setup 函数中的 props 和 emit 来实现。具体来说，我们需要在组件中声明一个名为 modelValue 的 prop，然后在组件内部使用它来渲染组件的值。同时，我们还需要在组件中声明一个名为 update:modelValue 的事件，并在需要更新值的时候使用 emit 方法触发该事件。这样，在使用该组件时，我们就可以使用 v-model 指令来双向绑定组件的值了。

例如，一个简单的计数器组件可以这样实现：

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

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

  export default {
    props: {
      modelValue: {
        type: Number,
        default: 0
      }
    },
    emits: ['update:modelValue'],
    setup(props, { emit }) {
      const increment = () => {
        emit('update:modelValue', props.modelValue + 1);
      };

      return {
        count: props.modelValue,
        increment
      };
    }
  };
</script>

在使用该组件时，我们可以这样绑定它的值：

<template>
  <div>
    <Counter v-model="count" />
    <p>Count: {{ count }}</p>
  </div>
</template>

<script>
  import Counter from './Counter.vue';

  export default {
    components: {
      Counter
    },
    data() {
      return {
        count: 0
      };
    }
  };
</script>

这样，我们就可以通过 v-model 指令来双向绑定计数器组件的值了。