作用域插槽（插槽 Prop）

是什么

从名字上来说“作用域插槽，插槽 Prop”可以分开来讲。首先为什么叫作用域插槽呢，我们知道 slot 本身是有作用域的，即父作用域和子作用域，它们是各自渲染的，也就是说，父作用域无法拿到子作用域中的数据（slot 的基础知识），但是有时候我们希望在父作用域拿到子作用域的数据怎么办呢，那就用作用域插槽。

而插槽 Prop 这个名字我认为是一个类比，因为我们知道 Prop 是父组件数据传递给子组件数据的通信方式，而插槽 Prop 也是一种通信方式，只不过是在 slot 情况下子组件传递给父组件，并且并不需要在 js 中指定 Prop。

为什么使用和怎么用

假设有这样一个场景（如下代码），我们在 Testslot.vue 组件中，有一个后备内容 {{bookinfo.title}}，当我们在父组件不传入任何值时，则显示 {{bookinfo.title}}，即页面会显示“三体”

// 子组件：Testslot.vue

<template>
 <div>
     <!-- 插槽 prop -->
     <slot name="slotName" :info="bookinfo">{{bookinfo.title}}</slot>
 </div>
</template>

<script>
export default {
  data() {
 return {
     bookinfo: {
         title: '三体',
         descriptioin: '科幻著作'
     }
 };
 }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

但是，如果我们想通过父组件来控制子组件的显示，即我想显示 {{bookinfo.descriptioin}}，直接使用是不行的，因为父组件并不能直接获取子组件的内容

// 父组件
// 这样写会报错
         <template v-slot:slotNam>
             {info.descriptioin}}
         </template>
1
2
3
4
5

而要想获取子组件的内容，选择性的展示，就要通过作用域插槽，整个过程分两步走

1. 在子组件的 slot 标签上，绑定你要传给父组件的数据，就像 Prop 的语法一样
2. 在父组件中定义一个参数，通过该参数来获取传入的数据

// 子组件：Testslot.vue
<template>
 <div>
     <!-- 插槽 prop -->
	// 这里 info 就是要传给父组件的 prop 变量，bookinfo 就是实际的内容
     <slot name="slotName" :info="bookinfo">{{bookinfo.title}}</slot>
 </div>
</template>

<script>
export default {
  data() {
 return {
     bookinfo: {
         title: '三体',
         descriptioin: '科幻著作'
     }
 };
 
</script

// 父组件
// 这里我用 receiver 来接收这个 info 的数据，slotName 是这个具名插槽的名
         <template v-slot:slotName="receiver">
             {{receiver.info.descriptioin}}
         </template>
// 简写
// receiver 只是用于接收 info 的临时值，你可以直接用解构的方式来获取 info

         <!-- <template v-slot:slotName="{info}">
             {{info.descriptioin}}
         </template> -->

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

最终页面将会显示“科幻著作”的字样

参考

如果你还不清楚，则阅读下面的文章，写得非常通俗易懂
when/why to use vue scoped slots