vue3的v-model语法糖

在 Vue 3 中，v-model 的语法糖有所改变。在 Vue 2 中，v-model 是用于双向绑定数据的指令，但在 Vue 3 中，v-model 不再是一个指令，而是一个用于组件的属性。

在 Vue 3 中，你可以通过在组件上使用 `v-bind` 和 `v-on` 来实现类似的效果。具体来说，你可以使用 `v-bind:modelValue` 来绑定数据的值，使用 `v-on:update:modelValue` 来监听数据的变化。

下面是一个示例：

<template>
  <div>
    <input :value="modelValue" @input="updateValue"/>
    <p>{{ modelValue }}</p>
  </div>
</template>

<script>
export default {
  props: {
    modelValue: String
  },
  methods: {
    updateValue(event) {
      this.$emit('update:modelValue', event.target.value);
    }
  }
}
</script>

在上面的示例中，我们使用了 `v-bind:modelValue` 将输入框的值绑定到了 `modelValue` 属性上，使用了 `v-on:update:modelValue` 来监听输入框值的变化，并通过 `$emit` 方法将新的值发送给父组件。

在使用这个组件时，你可以直接使用 `v-model` 指令来实现双向绑定：

<template>
  <div>
    <CustomInput v-model="message"/>
  </div>
</template>

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

export default {
  components: {
    CustomInput
  },
  data() {
    return {
      message: ''
    };
  }
}
</script>

这样，`message` 变量的值将会与 `CustomInput` 组件的 `modelValue` 属性进行双向绑定。当输入框的值发生变化时，`message` 的值也会相应地更新。