自定义button组件时slot的使用

MyButton.vue：

<template>
  <button :class="['my-btn',btnClass]">
    <slot name='btnText'></slot>
  </button>
</template>
<script>
export default {
  props: { btnClass: String, btnText: String }
}
</script>
<style lang="less" scoped>
.my-btn {
  width: 80px;
  line-height: 34px;
  border-radius: 5px;
  border: none;
  background-color: #000;
  color: #fff;
}
.btn-primary {
  background-color: blue;
}
.btn-success {
  background-color: green;
}
.btn-warning {
  background-color: yellow;
}
.btn-danger {
  background-color: red;
}
</style>

 

使用：

    <MyButton btnClass='btn-primary' btnText='按钮'>
      <template v-slot:btnText>按钮</template>
    </MyButton>