Vue3中ElementPlus组件二次封装，实现原组件属性、插槽、事件监听、方法的透传

<script setup lang="ts">
import { ref, computed } from 'vue';
import { ElButton } from 'element-plus';
 
// 父组件传递的属性
const props = defineProps<{
  text: string;
  size: 'small' | 'medium' | 'large';
}>();
 
// 自定义组件的属性
const customSize = computed(() => props.size === 'large' ? 'medium' : props.size);
 
// 父组件传递的事件
const emit = defineEmits(['update:text', 'customEvent']);
 
// 原组件的方法
function handleClick() {
  emit('update:text', '新文本');
  emit('customEvent', 'some data');
}
</script>
 
<template>
  <ElButton :text="props.text" :size="customSize" @click="handleClick">
    <template #icon>
      <!-- 插槽内容 -->
      <img src="icon.png" alt="自定义图标" />
    </template>
  </ElButton>
</template>

这个例子展示了如何在Vue 3中使用<script setup>语法和Element Plus组件库来创建一个自定义按钮组件。它包括了属性的接收和传递、插槽的使用以及事件的触发和监听。