封裝組件的原則是：組件只是數(shù)據(jù)流通的一個(gè)管道，不要糅合太多的邏輯在里面，是一個(gè)純組件，還要根據(jù)自己項(xiàng)目的業(yè)務(wù)場(chǎng)景做具體的處理。文章來源地址http://www.zghlxwxcb.cn/news/detail-689919.html
// MyButton.vue
// 基于element-plus中el-button來封裝按鈕
<template>
<el-button @click="handleClick">
<div class="btn-text-style"> // 文本樣式
<slot></slot> // 預(yù)留按鈕文本插槽
</div>
</el-button>
</template>
<script setup>
const emits = defineEmits(['click'])
// 出發(fā)click事件
const handleClick = () => {
emits('click')
}
</script>
<style>
.btn-text-style {
font-size: 14px;
font-weight: bold;
font-family: 'Courier New', Courier, monospace;
}
</style>
// 在具體組件中的使用
// 根據(jù)透?jìng)鰽ttributes 即屬性的繼承
// 透?jìng)?attribute 指的是傳遞給一個(gè)組件，卻沒有被該組件聲明為 props 或 emits 的 attribute
// 或者 v-on 事件監(jiān)聽器。最常見的例子就是 class、style 和 id。
// 我們?cè)诟附M件中添加的各種屬性都會(huì)被子組件繼承下來，所以有了 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>
文章來源：http://www.zghlxwxcb.cn/news/detail-689919.html
到了這里，關(guān)于vue 基于element-plus el-button封裝按鈕組件的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
