setup语法糖 中 二次封装el-botton

在Vue中，可以通过自定义组件来封装原生的HTML元素，使其具有更多的功能和样式。下面是一种二次封装el-button的方法：

1. 创建一个名为MyButton的Vue组件：

<template>
  <el-button :type="type" :disabled="disabled" @click="$emit('click')">
    <slot></slot>
  </el-button>
</template>

<script>
export default {
  name: 'MyButton',
  props: {
    type: {
      type: String,
      default: 'primary'
    },
    disabled: {
      type: Boolean,
      default: false
    }
  }
}
</script>

2. 在父组件中使用MyButton组件：

<template>
  <div>
    <my-button @click="handleClick">Click me!</my-button>
  </div>
</template>

<script>
import MyButton from './MyButton.vue'

export default {
  components: {
    MyButton
  },
  methods: {
    handleClick () {
      console.log('Button clicked!')
    }
  }
}
</script>

在上面的代码中，我们使用了MyButton组件代替了el-button，同时将@click事件传递给了MyButton组件，使其可以像原生的el-button一样响应点击事件。此外，我们还可以通过props属性来设置MyButton组件的类型和禁用状态。这样，我们就可以通过二次封装的方式来定制自己的按钮组件了。