vue3-v-model原理

对比：Vue-2.3v-model原理-CSDN博客

v-model为:modelValue和@update:modelValue的简写

v-model等价于v-model:modelValue，其中modelValue可以被换成其他的变量名，同样内部的子组件的相关变量名也要跟随更改

表单类组件封装

父组件

<ChannelSelect v-model="cateId"></ChannelSelect>

子组件

<script setup>
defineProps({
  modelValue: {
    type: [Number, String]
  }
})

const emit = defineEmits(['update:modelValue'])
</script>
<template>
  <el-select
    :modelValue="modelValue"
    @update:modelValue="emit('update:modelValue', $event)"
  >
  </el-select>
</template>