组件中的v-model

在组件上绑定v-model，如下：

father.vue
<template>
<Son v-model="data"></Son>
</template>

在vue2中，组件中的v-model指的是：

:value 和 @input 的简写

在vue3中，组件中的v-model指的是：

:modelValue 和  @update:modelValue 的简写

子组件不能直接修改父组件的值，所以v-model不适用；
需要单独定义 @update去修改父组件的值，而modelValue 是可以接收父组件的值去渲染；
Son.vue
父传子defineProps

//父传子传下来的值modelValue,使用defineProps接收；
defineProps({
  modelValue: {
    type: [Number, String]
  }
});
//在vue3的setup中，我们使用defineProps来定义父组件传递的props;
//子传父
const emit = defineEmits(['update:modelValue']);

<template>
  <el-select 
  :modelValue="modelValue" 
  @update:modelValue="$emit('update:modelValue',$event)" 
  placeholder="请选择" size="large">
    <!-- 选项是根据文章分类渲染的-->
    <el-option v-for="channel in channelList" :key="channel.id" :label="channel.cate_name" :value="channel.id" />
  </el-select>
</template>

分析：
1、父组件把modelValue 的值传给子组件；
2、:modelValue="modelValue" 是子组件在模版中渲染传过来的值；
3、当监控到组件中的modelValue 的值有所改变时，再把modelValue 的值传给父组件；
4、这样就实现了modelValue 数据的双向绑定；