vue3中button组件的开发与使用

今天我们来讲解一下vue3中button组件的开发：

子组件MyButton.vue:

<template><div><button class="h-btn" :class="[typeClass,sizeClass]" @click="handleClick"><slot/></button></div>
</template><script setup>
import { computed } from 'vue'
const props = defineProps({type: {type: String,default:'default',validator: function(value) {// 自定义验证逻辑return ['default','danger','primary'].includes(value)}},size: {type: String,default:'default',validator: function(value) {// 自定义验证逻辑return ['default','small','large'].includes(value)}}
});
//计算属性
const typeClass = computed(()=>{return 'h-btn-'+ props.type
})
const sizeClass = computed(()=>{return 'h-btn-'+ props.size
})
// 处理点击事件
const emit = defineEmits(['click']); // 定义要发出的事件
const handleClick = (event) => {console.log('子组件触发了：',event);   // 使用 emit 将 click 事件发出emit('click', event);
};
</script><style lang="scss" scoped>// 默认背景色 默认大小.h-btn {line-height: 1.499;position: relative;display: inline-block;font-weight: 400;white-space: nowrap;text-align: center;background-image: none;box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);cursor: pointer;transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;touch-action: manipulation;padding: 5px 10px;font-size: 14px;border-radius: 4px;color: rgba(0, 0, 0, 0.65);background-color: #fff;border: 1px solid #d9d9d9;}.h-btn:focus {outline: 0;}// primary类.h-btn-primary {color: #fff;background-color: #1890ff;border-color: #1890ff;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);}// danger类.h-btn-danger {color: #fff;background-color: #ff4d4f;border-color: #ff4d4f;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);}// size:small.h-btn-small {padding: 4px 8px;font-size: 12px;}// size:large.h-btn-large {padding: 6px 12px;font-size: 16px;}
</style>

在父组件App.vue中引用子组件MyButton:

<script setup>
import MyButton from "./components/MyButton.vue";
const handlerClick = (e)=>{console.log('父组件被点击了:',e);  
}
</script><template><span>测试type属性：</span><div><MyButton>default</MyButton><MyButton type="danger">danger</MyButton><MyButton type="primary">primary </MyButton></div><br /><span>测试size属性：</span><div><MyButton>default-default</MyButton><MyButton type="danger" size="small">danger-small</MyButton><MyButton type="primary" size="large">primary-large </MyButton></div><span>测试click事件：</span><div><MyButton @click="handlerClick">default-default</MyButton></div></template><style scoped>
.logo {height: 6em;padding: 1.5em;will-change: filter;transition: filter 300ms;
}
.logo:hover {filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {filter: drop-shadow(0 0 2em #42b883aa);
}
.editor-box{width: 500px;height: 300px;
}
</style>

 以上就是vue3中button组件的开发与引用，有疑问的请留言