vue 插槽的使用、分类

1. 什么是插槽

插槽(Slot)是vue为组件的封装者提供的能力。允许开发者在封装组件时，把不确定、希望由用户指定的部分定义为插槽。

2. 插槽的使用

2.1 插槽的简单使用

定义插槽区域的语法

<slot></slot>

78.png

2.2 slot的name属性

• vue 官方规定，每一个slot插槽，都要有一个name名称
• 如果不指定，name的默认值是defalut
• 默认情况下，在使用组件的时候，提供的内容都会被填充到名字 为default的插槽中

79.png

2.3 v-slot的用法(指定要填充的插槽名)

可以在使用相关 组件的时候，根据插槽的name指定要填充的插槽位置

• v-slot这个指令只能用在components和<template>中，不能直接用在元素标签上。

• 语法

  v-slot:插槽名
  

81.png

实现效果

82.png

• <template>是一个虚拟的标签，只是起到一个包裹的作用，不会被渲染为一个具体的元素，在页面中看不到真实的元素

83.png

2.4 v-slot的简写(#插槽名)

语法

#插槽名

84.png

2.5 后备内容（默认插槽 name为default）

封装组件时，可以为预留的<slot>插槽提供后备的内容（默认内容）。如果组件的使用者没有为插槽提供任何内容，则后备内容会生效。

2.6 具名插槽

具名插槽就是插槽有自己的名字,带名字的插槽叫做具名插槽

85.png

2.7 作用域插槽（既带数据，又带名字的插槽）

• 可以接受到插槽上定义的数据
• 如果插槽上没有定义数据，则接受到的是一个空对象

怎么接收插槽的数据 语法

v-slot:插槽名="变量名"
or
#插槽名="变量名"

可以使用这个变量名就可以获取 插槽上 定义的数据，变量名可以随义定义，只要js标识符的命名规则。

示例代码如下：

86.png

实现效果如下：

87.png

2.8 作用域插槽的解构赋值

• 在为插槽指定数据的时候可以定义一个字符串，也可以为动态绑定值，

• 示例如下：

  <!-- 指定一个字符串的值 ，给slot插槽定义一个变量名为 msg,值为 hello wjy-->
  <slot msg="hello wjy"></slot>
  <!-- 动态绑定一个变量userInfo的值,给slot插槽定义了一个变量名 user,值为userInfo的值 -->
  <slot :user="userInfo"></slot>
  

88.png

实现效果

89.png

3.总结

插槽.png