vue3、element plus自定义组件_element-plus 自定义组件-优快云博客

1、自定义组件绑定v-model。在自定义组件上绑定v-model，在组件内部被展开成两个部分：

/**
*组件使用处代码，别忘了引入
*/
<bus-selector v-model="searchForm.bus" />


/**
*组件内代码
*/
<template>
    <!-- handlerChanged($event) -->
    <!-- $emit('update:modelValue', $event) -->
    <el-select 
        v-model="selectValue"
        clearable
        filterable
        @change="$emit('update:modelValue', selectValue)" 
        value-key="id"
        placeholder="请选择车辆">
            <el-option v-for="item in options" :key="item.id" :label="item.outerPlate" :value="item" />
    </el-select>
</template>
  
<script lang="ts" setup>
import { ref, onMounted, type Ref, toRefs,onUpdated } from 'vue';
import axios from 'axios';
import { httpErrBox } from '@/tools/CommonTool';
import { Bus } from '@/clas/Bus';


//接收父组件v-model传递过来的值，并引入修改方法update:modelValue
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])

//el-select的v-model不能绑定prop属性，所以定义本地变量一个
//并且change事件中需要将这个值传递给更新方法，即update:modelValue
const selectValue = ref(props.modelValue);
//加入下面这行代码，是为了解决选择改变后显示不更新的问题
onUpdated(()=>{
    selectValue.value = props.modelValue;
})

//定义数据源，并从服务器获取数据
let options = ref(new Array<Bus>);
onMounted(()=>axios.get("/api/bus/all")
    .then(response=>{
        options.value = response.data;
    }).catch(err=>{
        httpErrBox(err,"加载Bus选择器数据出错")
    }))

</script>