【Vue3】抛弃 @update 使用 defineModel 实现父子组件之间的 v-model 双向绑定

别再用@update:modelValue 和props进行父子之间传递双向绑定了 ！
vue@3.4之后，只需要使用内置宏defineModel即可实现父子组件数据的双向绑定！
https://cn.vuejs.org/guide/components/v-model.html

使用 Vue 3 中的 defineModel 可以替代传统的 @update 来实现父子组件之间的 v-model 双向绑定。 defineModel 使得绑定更加简洁，且具有更好的语义。

新版用法

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

<script setup>
import { defineModel } from 'vue';

defineModel('modelValue');
</script>

以前的用法

字组件：

<template>
  <input :value="modelValue" @input="updateInput" />
</template>

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

const props = defineProps({
  modelValue: String,
});

const emit = defineEmits(['update:model-value']);

const updateInput = (event) => {
  emit('update:model-value', event.target.value);
};
</script>