vue3+element-plus中父子传值v-model的使用调整

问题描述

在vue2中，子组件使用model来改变v-model原有的触发事件
子组件

<el-select :value="title" @change="$emit('change',$event)"><el-select>
model:{
	prop:'title',//表示父组件传递过来的值
	event:'change'//原有的触发事件是'input'，如果想要改变原有事件，就要在这里重新写触发事件
}

父组件

<parentComponent v-model="xx" />
//等同于
<parentComponent :title="xx" @change="" />

但是在vue3中，下拉框数据选中没有显示，父组件拿不到数据

---

原因分析以及解决方法：

1.选中数据无显示：vue3使用的组件库是element-plus，绑定数据不能使用value,需要使用model-value / v-model

<el-select v-model="title" @change="$emit('change',$event)"><el-select>

2.父组件拿不到数据：vue3中组件上使用v-model用法改变，不需要使用model，
使用统一的update:xx的形式

//子组件
<el-select v-model="title" @change="$emit('update:title',$event)"><el-select>
//父组件
<parentComponent v-model:title="xx" />