父子组件双向绑定
1、vue3中 v-model是：modelValue和@updat:modelValue的简写
2、父传子，通过defineProps({})接收；
3、子组件绑定父组件传递过来的值 :modelValue=“modelValue”，
子组件通过emit与父组件实时绑定：
const emit =defineEmits([‘update:modelValue’])
@update:modelValue=“emit(‘update:modelValue’,$event)”
4、v-model=“params.cate_id等价于v-model:modelValue=“params.cate_id
v-model:modelValue中的modelValue可以换成其他名称,子组件接收也要改成相同的名字
5、v-model可以双向绑定多个值v-mode:a=” " v-model:b=” "
vue3封装下拉框组件案例：
<!-- 父组件引入子组件 -->
<categorySelect v-model="params.cate_id"></categorySelect>
<!--子组件代码 -->
<script setup lang="ts">
import {ref} from 'vue'
import {getChannnels} from '@/api/articl'
defineProps({
modelValue:{
type:[Number,String]
}
})
const emit =defineEmits(['update:modelValue'])
//分类
const CategoriesList = ref([])
const getCategories = async ()=>{
const res = await getChannnels()
CategoriesList.value = res.data.data
}
getCategories()
</script>
<template>
<el-select
:modelValue="modelValue"
@update:modelValue="emit('update:modelValue',$event)"
placeholder="Select"
size="large"
style="width: 240px"
>
<el-option
v-for="item in CategoriesList"
:key="item.id"
:label="item.cate_name"
:value="item.id"
/>
</el-select>
</template>
vue2封装下拉框组件案例：
