vue如何自定义组件

下面是一个自定义的组件的源代码

<template>
  <div>
    测试 type
    <d-button type="primary">primary</d-button>
    <d-button type="danger">danger</d-button>
    <d-button>default</d-button>

    测试 size
    <d-button size="small">primary</d-button>
    <d-button size="large">danger</d-button>
    <d-button>default</d-button>
    错误传值
    <d-button size="big"></d-button>
    点击事件
    <d-button @click="handle">传值</d-button>
    <!-- 组件绑定的事件默认是不会被浏览器识别的，我们需要做额外的处理让事件生效，有俩种方案， 
      1、添加 .native 修饰符，添加了这个修饰符，事件就会绑定到组件的根元素身上
      2、把click 当成自定义事件 通过 $emit 执行 （通用写法）
    -->
  </div>
</template>

<script>
import DButton from "./components/Button/index.vue";
export default {
  props: {},
  data() {
    return {};
  },
  created() {},
  mounted() {},
  watch: {},
  computed: {},
  methods: {
    handle(e) {
      console.log("点击了", e);
    },
  },
  components: {
    DButton,
  },
};
</script>
<style lang="less" scoped>
</style>

b-button.vue源代码

<template>
  <button :class="[typeClass, sizeClass]" class="h-btn" @click="clickBtn">
    <!-- 
          h-btn是一个基础类名，不管有没有，这个类都有
          动态渲染 具体的 颜色类 即可 
      -->
    <slot></slot>
  </button>
  <!-- 
      1、事件如果写道原生支持的标签身上，会被直接识别为原生事件 <button @click=handleder></button>
      2、事件如果写在 自定义组件身上，默认状态会被识别为自定义事件 <d-button @click="hander1"></d-button>
        1、添加 .native 修饰符，可以让 vue 帮助我们把事件绑定成浏览器支持的原生事件
        2、就当成自定义事件识别，然后按照 父子组件 通信的手段，通过子组件内事件触发，然后调用 $emit 方法触发即可。

   -->
</template>

<script>
export default {
  // 我们需要根据 不同的 type 的值，给button 绑定不同的类名
  // 'default' => h-btn-default
  // 'primary' => h-btn-primary
  // 'danger'  => h-btn-danger
  // type => h-btn-type
  props: {
    type: {
      type: String, // 必须是字符串类型
      default: "default", // 默认值
    },
    // 用来控制  button 的大小
    size: {
      type: String,
      default: "default",
      validator: function (value) {
        //   value 表示 这个 属性的值
        const sizeList = ["small", "large", "default"];
        // 如果传入的参数不在可选参数 的列表中，给出 用户提示 告诉他，那个参数传错了
        return sizeList.includes(value); // 判断这个值，数组中 有没有 返回值是 true 或者 false
        // 当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告

        /* 
        如， 传入 size="big"
        控制台，则会报错 Invalid prop: custom validator check failed for prop "size".
        */
      },
    },
  },
  data() {
    return {};
  },
  created() {},
  mounted() {},
  watch: {},
  computed: {
    typeClass() {
      return `h-btn-type-${this.type}`;
    },
    sizeClass() {
      return `h-btn-size-${this.size}`;
    },
  },
  methods: {
    clickBtn(e) {
      // 触发 父组件 传下来的自定义事件  click
      this.$emit("click", e);
    },
  },
  components: {},
};
</script>
<style lang="less" scoped>
// 自己编写自定义组件的适合，  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-type-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-type-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-size-small {
  padding: 4px 8px;
  font-size: 12px;
}
// size:large
.h-btn-size-large {
  padding: 6px 12px;
  font-size: 16px;
}
</style>