vue3中二次封装botton

在 Vue3 中二次封装 button，可以按照以下步骤进行：

1. 创建一个新的组件文件，如 MyButton.vue；
2. 在 MyButton.vue 中定义一个 template，可以使用原生的 button 标签或者其他符合需求的标签；
3. 在 MyButton.vue 中定义 props，来接收父组件传递的参数，如按钮的文字、颜色等；
4. 在 MyButton.vue 中定义 methods，来处理按钮的点击事件，如发送请求等；
5. 在 MyButton.vue 中使用 setup 函数，来处理 props 和 methods；
6. 在父组件中使用 MyButton.vue 组件，并传递相应的 props。

示例代码如下：

// MyButton.vue
<template>
<button :style="{backgroundColor: color}" @click="handleClick">
{{ text }}
</button>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
props: {
text: {
type: String,
default: 'Button'
},
color: {
type: String,
default: 'blue'
}
},
setup(props, { emit }) {
const handleClick = () => {
// 处理按钮的点击事件
emit('click')
}
return {
handleClick
}
}
})
</script>

// 在父组件中使用 MyButton.vue
<template>
<div>
<my-button text="Submit" color="green" @click="handleSubmit" />
</div>
</template>

<script>
import { defineComponent } from 'vue'
import MyButton from './MyButton.vue'

export default defineComponent({
components: {
MyButton
},
methods: {
handleSubmit() {
// 处理提交事件
}
}
})
</script>