vue3自定义组件使用v-model方式

在Vue3中，我们可以使用v-model指令在自定义组件中实现双向数据绑定。这篇文章将介绍如何在Vue3中自定义组件并使用v-model方式。
子组件：

<template>
  <el-input v-model="modelData" @change="handleChange"> </el-input>
</template>

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

const props = defineProps({
  modelValue: { type: [String, Number] }
});

const emits = defineEmits(['change', 'update:modelValue']);
const modelData = ref(props.modelValue);
watch(
  () => props.modelValue,
  (n) => {
    modelData.value = n;
  }
);
const handleChange = (params) => {
  // 如果不需要父组件自定义方法 可以直接使用emits('update:modelValue', params)
  emits('change', emits('update:modelValue', params));
};
</script>

父组件调用：

<template>
  <child v-model="inputModel" @change="handleChange" />
</template>
<script setup>
import child from 'xxx/child.vue';

const handleChange = ()=>{
// 自定义监听事件
}
</script>