【Vue | 补洞 | 13】三种插槽的应用

用生活小常识，理解三种插槽的作用与应用场景！

1. 作用

​  在自定义组件中，预留位置供其他开发者将自定义结构传入

​  举个简单的例子，ElementUI 的布局容器，可以使用 <el-container> 包裹 <el-header> 的方式来实现布局。而在 <el-container> 中，就需要预留一个 <slot></slot> 的位置供使用者传入自定义结构。

<el-container>
    <el-header>Header</el-header>
    <el-main>Main</el-main>
</el-container>

2. 用法

常用插槽可分为三种：默认插槽、具名插槽、作用域插槽。以下所有代码示例，以 comp 作为自定义组件名称。

1）默认插槽

​  无需指定插槽名称，自定义结构会默认填充到 <slot></slot> 的位置中

就像坐摩的，默认只有后座一个座位

// 声明子组件 comp.vue
<template>
    <div>
        <slot></slot>
    </div>
</template>

// 父组件调用 comp.vue
<comp title="里面是默认插槽">
    <ul>
      <li v-for="(item, index) of datas" :key="index">{{ item }}</li>
    </ul>
</comp>

编译后的效果同下面代码：

// comp.vue
<template>
    <div>
        <ul>
      		<li v-for="(item, index) of datas" :key="index">{{ item }}</li>
    	</ul>
    </div>
</template>

2）具名插槽

​  指定了多个插槽的情况下，可以取名区分

就像坐高铁，有多个座位，乘坐人对号入座

// 声明子组件 comp.vue
<template>
    <div>
        <slot name="header"></slot>
    </div>
</template>

传入插槽时，有三种写法

① 写法一：slot 属性指定名称（不推荐，已在 Vue3 被官方废弃）

// 父组件调用 comp.vue
<comp>
  <h1 slot="header"></h1>
  <h2 slot="header"></h2>
</comp>

② 写法二：v-slot （官方推荐写法）

// 父组件调用 comp.vue
<comp>
  <template v-slot:header>
     <h1></h1>
     <h2></h2>
  </template>
</comp>

③ 写法三：v-slot 简写形式：#

// 父组件调用 comp.vue
<comp>
  <template #header>
     <h1></h1>
     <h2></h2>
  </template>
</comp>

注意

• slot 可写在 组件 上，如 <h1 slot="xxx">；而 v-slot 只能写在 <template> 上！
• 用 template 自定义结构包裹有两个优势：
  • 无需重复 在每一个子元素上写 slot 属性
  • 经过 Vue 编译后，template 不会出现在真实DOM上，不会破坏原有结构
• 只有被 slot 属性标记的元素才生效，如 <h1 slot="header"></h1>123 里的 123 不会被传入插槽中

3）作用域插槽

• 在子组件中 定义数据；在自定义结构中 获取到子组件提供的数据。（<slot :xxx="xxx"></slot>谁往插槽里传结构，xxx数据就传给谁。）
• 传入自定义结构时，必须要用 template 包裹

就像高铁已为每个座位分配了垃圾袋，谁坐到对应的座位上，这个垃圾袋就分配给了谁

// 声明子组件 comp.vue
<template>
    <div>
        <slot :books="books" name="book"></slot>
    </div>
</template>

<script>
export default {
  data () {
    return {
      books: ['JavaScript', 'CSS', 'HTML']
    }
  }
}
</script>

传入插槽时，有三种写法

① 写法一：scope

<comp>
   <template scope="{ books }" v-slot:book>
      <ul>
        <li v-for="(item, index) of books" :key="index">{{ item }}</li>
      </ul>
   </template>
</comp>

② 写法二：slot-scope（官方不推荐，即将被废弃）

<comp>
   <template slot-scope="{ books }" v-slot:book>
      <ul>
        <li v-for="(item, index) of books" :key="index">{{ item }}</li>
      </ul>
   </template>
</comp>

③ 写法三：v-slot （推荐写法）

<comp>
   <template v-slot:book="{books}">
      <ul>
        <li v-for="(item, index) of books" :key="index">{{ item }}</li>
      </ul>
   </template>
</comp>

④ 写法四：v-slot 简写形式：#

<comp>
   <template #book="{books}">
      <ul>
        <li v-for="(item, index) of books" :key="index">{{ item }}</li>
      </ul>
   </template>
</comp>

3. 备注

• 默认插槽自身对应 default 的插槽名，因此 <slot></slot> 相当于 <slot name="default"></slot>
• 可以往同一个插槽中放多个元素，但需指定名称

4. 总结

• 常用插槽：默认插槽、具名插槽、作用域插槽
• 常用场景：通用组件封装
• 即将被废弃的写法：slot="xxx"、slot-scope
• 推荐写法：v-slot:xxx="{ data }"（无论是具名插槽，或作用域插槽都可用）