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

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-dialog
    v-model="dialogVisible"
    v-bind="$attrs"
    append-to-body
    class="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>