vue3中v-model使用及封装下拉框组件

父子组件双向绑定

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封装下拉框组件案例：