封装组件的原则是：组件只是数据流通的一个管道，不要糅合太多的逻辑在里面，是一个纯组件，还要根据自己项目的业务场景做具体的处理。文章来源地址https://www.toymoban.com/news/detail-689919.html
// MyButton.vue
// 基于element-plus中el-button来封装按钮
<template>
<el-button @click="handleClick">
<div class="btn-text-style"> // 文本样式
<slot></slot> // 预留按钮文本插槽
</div>
</el-button>
</template>
<script setup>
const emits = defineEmits(['click'])
// 出发click事件
const handleClick = () => {
emits('click')
}
</script>
<style>
.btn-text-style {
font-size: 14px;
font-weight: bold;
font-family: 'Courier New', Courier, monospace;
}
</style>
// 在具体组件中的使用
// 根据透传Attributes 即属性的继承
// 透传 attribute 指的是传递给一个组件，却没有被该组件声明为 props 或 emits 的 attribute
// 或者 v-on 事件监听器。最常见的例子就是 class、style 和 id。
// 我们在父组件中添加的各种属性都会被子组件继承下来，所以有了 type, size, icon等这些属性
<template #footer>
<span class="dialog-footer">
<MyButton @click="cancel" type="info" size="mini" disabeld icon="Edit">取消</MyButton>
<MyButton type="primary" @click="submitForm">确定</MyButton>
</span>
</template>
文章来源：https://www.toymoban.com/news/detail-689919.html
到了这里，关于vue 基于element-plus el-button封装按钮组件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
