Vue2 插槽

为封装组件开发者提供的功能，把不确定的，希望用户自定义的部分叫做插槽

1
<slot name="slotName">default</slot>

在组件中为用户自定义内容预留的位置，当用户在组件标签中的插入自定义的内容就会被组件渲染在插槽标签（slot）所在的位置

slot 标签规定必须要有一个 name 属性，没有设置时，vue 默认将 name 设置成 default

如果用户没有传递自定义内容，则会显示插槽中的默认值，也就是后备内容，

1
2
3
4
<template v-slot="slotName"></template>

<template #slotName></template>
<!-- 省略 v-slot，用 # 代替 -->

v-slot 指令只能设置在 template 标签中，为了指定用户自定义的内容插入那个插槽

用户自定义内容就写在设置了 v-slot 指令的 template 标签中

在页面渲染中，template 是不会被渲染成实际标签的，它是一个虚拟标签

绑定了 v-slot 指令的 template 标签是需要写在需要插入自定义内容的组件标签中的

具名插槽

起名字的插槽就是具名插槽

1
<slot name="slotName">default</slot>

作用域插槽

在封装组件时，为预留的插槽提供属性对应的数据

1
<slot name="slotName" :msg="content">default</slot>
1
<template #slotName="scope.msg"></template>

给插槽设置属性，template 可以通过 v-slot 指令获取这个属性以及属性值，scope 是一个对象，包括属性和属性值

提供 JS 获取插槽内容

1
this.$refs.userTable.$slots

$slots 返回一个数组，数组元素都是插槽内容的虚拟 DOM