如何vue自定义按钮组件

1.首先写个公共的button组件,我起的名字是MybuttonUI.vue,如下面代码

<template>
  <div @click="handleClick" :class="type" class="btn" :style="buttonstyle">{{buttonname}}</div>
</template>
<script>
export default {
  name: "MybuttonUI",
  components: {},
  props: {
    //按钮公共样式
    type: String,
    //按钮名字
    buttonname:String,
    //按钮额外样式
    buttonstyle:Object,
  },
  methods: {
    //click事件抛出去
    handleClick() {
      this.$emit("click");
    },
  },
  created(){
  },
  computed: {},
  mounted() {},
  data() {
    return {};
  },
};
</script>
<style spcoed lang="less">
.btn{
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.primary {
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
}
.success {
  color: #fff;
  background-color: #67c23a;
  border-color: #67c23a;
}
.danger {
  color: #fff;
  background-color: #f56c6c;
  border-color: #f56c6c;
}
</style>

2.怎么使用,看下面代码

  <MybuttonUI @click="Handel" type="danger" :buttonstyle="buttonstyle" :buttonname="buttonname"></MybuttonUI>

  methods: {
    Handel(){
      alert("Button按钮测试")
    }
  },
  data() {
    return {
      //传递buttonstyle值
      buttonstyle:{
        'width':"100px",
        'height':"30px",
        'font-size':'16px',
      },
      buttonname:"测试按钮"
    };
  },

3.因为click事件被抛出了,所以Handel事件会被触发,只要写个Handel函数就行.其余在父组件里面写入就行