vue-slot

什么是插槽？

插槽就是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。

普通插槽

//子组件 Slot.vue
<template>
  <div>
    <h2>窗前明月光</h2>
    <h2>疑似地上霜</h2>
    <slot></slot>    
    //<slot>123</slot>  允许插槽内存在默认展示的内容，但当父组件内有内容时，会被覆盖
    <h2>低头思故乡</h2>
  </div>
</template>

//父组件中将此子组件注册后方可使用
<Slot><h2 style="color:red">举头望明月</h2></Slot>

具名插槽

简单理解为给插槽取一个名字，父组件中使用template模板包裹需要放入插槽的内容，并给他加上v-slot:name,他就会放入指定的插槽位置。

//子组件
<template>
  <div>
    <h2>窗前明月光</h2>
    <slot name="two"></slot>
    <slot name="three"></slot>
    <h2>低头思故乡</h2>
  </div>
</template>

//父组件 填充内容, 父组件通过 v-slot:[name] 的方式指定到对应的插槽中，内容在父组件的位置不影响放入插槽中的位置
    <Slot>
      <template v-slot:three>
        <h2 style="color:red">举头望明月</h2>
      </template>
      <template v-slot:two>
        <h2 style="color:red">疑是地上霜</h2>
      </template>
    </Slot>

注意：

1. 父级的填充内容如果指定到子组件的没有对应名字插槽，那么该内容不会被填充到默认插槽中。

2. 如果子组件没有默认插槽，而父级的填充内容指定到默认插槽中，那么该内容就“不会”填充到子组件的任何一个插槽中。

3. 如果子组件有多个默认插槽，而父组件所有指定到默认插槽的填充内容，将“会” “全都”填充到子组件的每个默认插槽中。

作用域插槽

作用域插槽其实就是带数据的插槽，即带参数的插槽，简单的来说就是子组件提供给父组件的参数，该参数仅限于插槽中使用，父组件可根据子组件传过来的插槽数据来进行不同的方式展现和填充插槽内容。

//子组件 绑定需要传给父组件的数据
<template>
  <div>
    <h2>窗前明月光</h2>
    <slot name="two" v-bind:content="content1"></slot>
    <slot name="three" v-bind:content="content2"></slot>
    <h2>低头思故乡</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content1:'疑似地上霜',
      content2:'举头望明月'
    }
  },
}
</script>

//父组件  第一个three是指定插槽的名字，第二个是接受来自插槽的数据
<mySlot>
      <template v-slot:three="three">
        <h2 style="color:red">{{three.content}}</h2>
      </template>
      <template v-slot:two="two">
        <h2 style="color:red">{{two.content}}</h2>
      </template>
</mySlot>

常用场景（以下为常用的情况之一）

如果子组件中的某一部分的数据，每个父组件都会有自己的一套对该数据的不同的呈现方式，这时就需要用到作用域插槽。