slot（插槽）是组件功能的重要组成部分，插槽必须结合组件使用才有意义。它为组件提供了对外的接口，允许从组件外部传递内容，并将这部分内容放置到指定的位置。

1.slot一般用法

简单说，slot就是允许父组件在子组件 处插入内容。

例如：

Parent.vue

<template>
  <div class="home">
    <h1>Parent</h1>
    <hr>
    <div>
       <MyButton>{{msg}}</MyButton>
    </div>
  </div>
</template>
<script>
import MyButton from "@/components/MyButton";
export default {
  name: 'ParentView',
  components:{
    MyButton
  },
  data(){
    return{

      msg: '父组件内容'
    }
  }
}

MyButton.vue

<template>
  <div>
    <button>我是按钮</button>
    <slot>这里是默认值</slot>
  </div>
</template>

<script>
export default {
  name: "MyButton",
  data(){
    return{
      child: '子组件内容'  
    }
  }
}
</script>

运行效果：

如果父组件不传入msg属性，slot处则显示默认值。

2.具名插槽

有时候，也许子组件内的slot不止一个，那么我们如何在父组件中，精确的在想要的位置，插入对应的内容呢？ 给插槽命一个名即可，即添加name属性。

例如：

Parent.vue

<template>
  <div class="home">
    <h1>Parent</h1>
    <hr>
    <div>
       <MyButton>
         <template> {{ msg }} </template>
         <template v-slot:bt-slot1> 这是插入到bt-slot1插槽的内容 </template>
         <template v-slot:bt-slot2> 这是插入到bt-slot2插槽的内容 </template>
       </MyButton>
    </div>
  </div>
</template>
<script>
import MyButton from "@/components/MyButton";
export default {
  name: 'ParentView',
  components:{
    MyButton
  },
  data(){
    return{

      msg: '父组件内容'
    }
  }
}

MyButton.vue

<template>
  <div>
    <button>我是按钮</button>
    <slot>这里是默认值</slot>
    <slot name='bt-slot1'> 这就是默认值2 </slot>
    <slot name='bt-slot2'> 这就是默认值3 </slot>
  </div>
</template>

<script>
export default {
  name: "MyButton",
  data(){
    return{
      child: '子组件内容'  
    }
  }
}
</script>

3.作用域插槽

作用域插槽能够让父组件使用子组件的数据。

例如： Parent.vue

<template>
  <div class="home">
    <h1>Parent</h1>
    <hr>
    <div>
       <MyButton>
         <template v-slot:default = 'slotvalue'> {{ slotvalue.value }} </template>
         <template v-slot:slot = 'slot2value'> {{ slot2value.value }} </template>
       </MyButton>
    </div>
  </div>
</template>
<script>
import MyButton from "@/components/MyButton";
export default {
  name: 'ParentView',
  components:{
    MyButton
  },
  data(){
    return{

      msg: '父组件内容'
    }
  }
}

MyButton.vue

<template>
  <div>
    <button>我是按钮</button>
    <slot :value='child'>这里是默认值</slot>
    <slot name="slot" :value='msg'>这里slot的默认值</slot>
  </div>
</template>

<script>
export default {
  name: "MyButton",
  data(){
    return{
      child: '子组件内容',
      msg: 'hello,world'  
    }
  }
}
</script>