vue高级组件封装 element组件二次封装

相关解读

1. 使用defineOptions定义组件名称
2. 使用useSlots获取插槽 获取父组件传递过来的dialog组件的插槽 通过循环直接通过动态插槽插入el-dialog组件中
3. 使用defineExpose暴露组件方法 父组件可通过ref直接调用
4. 使用v-bind="$attrs"绑定父组件传递的属性
5. 使用v-bind="slotProps"绑定插槽属性
6. 经过这些处理可直接在使用这个组件的地方 透传el-dialog组件的属性和插槽 同时能接受el-dialog抛出的方法

组件封装

<template><el-dialogv-model="dialogVisible"v-bind="$attrs"append-to-bodyclass="my-dialog"><template v-for="(_,name) in slots" #[name]="slotProps"><slot :name="name" v-bind="slotProps"></slot></template></el-dialog>
</template><script setup lang="ts">
import { useSlots, Slots } from 'vue';
defineOptions({name: 'MyDialog'
})
const slots:Slots  = useSlots();
const dialogVisible = ref(false)
const init = () => {dialogVisible.value = true
}
defineExpose({init
})
</script><style lang="scss">
// 重新定义弹窗样式
.my-dialog{}
</style>

组件使用

<template><MyDialog ref="myDialog" width="500px" top="20vh" draggable @closed="handleClosed"></MyDialog>
</template>
<script setup lang="ts">const myDialog = ref()const handleClosed = () => {console.log('closed')}onMounted(() => {myDialog.value?.init()})
</script>