子组件：

<template>
   <div :class="['my-btn',btnStyle]">
    {{btnText}} 
    <div>
         <!--匿名slot -->
        <slot></slot>
        <!-- 具名slot -->
        <slot name="slot1"></slot>
       <slot name="slot2" ></slot>
        <slot name="childSlot" :data="data">
         </slot>
    </div>
   </div>
 
</template>

<script>
export default {
  
  props:{
    btnStyle:String,
    btnText:String
  },
 
  data () {
    return {
      data:['1','2','3'],
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>
<style>
 .my-btn{
     height:34px;
     padding:0 15px;
     border-radius: 5px;
     border:none;
     outline: none;
     background-color: aliceblue;
 }
 .btn-warning{
     background: red;
 }
</style>

父组件：

<template>
  <div id="app">
       <h1>vue中插槽的实际应用</h1>
       <my-button btnStyle='btn-warning' btnText='这是btnText'>
       </my-button >

   <!-- 匿名插槽 -->
       <div :style="{background:'gray','margin-top':'50px'}">
          <my-button>
          <div>我是匿名slot</div>
          </my-button>
       </div>
    <!-- 具名插槽 -->
       <div :style="{background:'gray','margin-top':'50px'}">
          <my-button>
          <template v-slot:slot2>
            <div style="background-color:gray">这是具名slot-2</div>
          </template>
          <template v-slot:slot1>
            <div style="background-color:pink">这是具名slot-1</div>
          </template>
          </my-button>
       </div>
      <!-- 作用域插槽-用列表展示出来 -->
       <div :style="{background:'gray','margin-top':'50px'}">
          <my-button>
          <template slot="childSlot" slot-scope="slotValue"> 
              <ul>
                <li v-for="(item,index) in slotValue.data" :key="index">{{item}}</li>
                </ul>
          </template>
          </my-button>
       </div>

       
  </div>
</template>

<script>
import  Button from '@/components/Button';
export default {
  
   components:{
       MyButton:Button,
   }

  
}
</script>
<style>

</style>

效果图如下：