Vue 3.x 自定义组件的 slots

slots （插槽），父组件在使用子组件的时候，在子组件插入任意内，包括html

举个小例子：
1、自定义一个按钮组件

<template>
    <div>
        <button class="btn-primary">
            <slot>default</slot>
        </button>

    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss" scoped>
.btn-primary{
    padding: 5px 10px;
    background: aquamarine;
    color: #fff;
    border: none;
}
</style>

注：<slot> </slot>就是父组件可以随意插入内容的位置

2、父组件使用

<template>
  <div>
    <v-button></v-button>
    <br>
    <v-button>确定</v-button>
    <br>
    <v-button>{{msg}}</v-button>
  </div>
</template>

<script>
import YtButton from ‘../components/YtButton‘
export default {
  data() {
    return {
      msg: "主页"
    }
  },
  components:{
      "v-button":YtButton
  }
};
</script>

展示如下图，当父组件没有写内容的时候，显示默认内容，

Vue 3.x 自定义组件的 slots

原文：https://www.cnblogs.com/qingheshiguang/p/14618388.html