今天我们来讲解一下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组件的开发与引用，有疑问的请留言