如何更优雅二次封装ElementUI

优雅地二次封装ElementUI组件通常意味着创建一个新的组件，它封装了ElementUI组件的某些功能，同时提供了更加简洁的API或更好的用户体验。以下是一个简单的例子，展示如何优雅地封装一个ElementUI的el-button组件。

<template>
  <el-button :type="type" @click="handleClick">
    <slot></slot> <!-- 使用默认插槽来显示按钮文本 -->
  </el-button>
</template>
 
<script>
import { Button as ElButton } from 'element-ui';
 
export default {
  name: 'MyButton',
  components: {
    ElButton
  },
  props: {
    type: {
      type: String,
      default: 'primary' // 设置默认的按钮类型
    }
  },
  methods: {
    handleClick(event) {
      this.$emit('click', event); // 向父组件发出click事件
    }
  }
};
</script>

在这个例子中，我们创建了一个名为MyButton的新组件，它继承了el-button的所有功能，同时通过props提供了一个默认的按钮类型，并且通过方法处理了点击事件的传递。使用这个组件时，你可以直接在模板中使用它，就像使用任何其他Vue组件一样。

<template>
  <my-button @click="handleMyButtonClick">Click Me</my-button>
</template>
 
<script>
import MyButton from './MyButton.vue';
 
export default {
  components: {
    MyButton
  },
  methods: {
    handleMyButtonClick() {
      // 处理按钮点击事件
    }
  }
};
</script>

在这个使用例子中，我们导入了MyButton组件，并在模板中使用它，提供了一个文本插槽，并监听点击事件。这样，我们可以在不牺牲ElementUI组件原有功能和特性的前提下，提供一个更简洁、更易用的API给开发者使用。