天津艺匠做网站seo自学网视频教程

封装组件的原则是：组件只是数据流通的一个管道，不要糅合太多的逻辑在里面，是一个纯组件，还要根据自己项目的业务场景做具体的处理。

// 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>