插槽的几种类型

用于实现组件的内容分发, 通过 slot 标签, 可以接收到写在组件标签内的内容

vue提供组件插槽能力, 允许开发者在封装组件时，把不确定的部分定义为插槽

1.3.1 匿名插槽

1. 组件内用<slot></slot>占位

2. 使用组件时夹着的地方, 传入标签替换slot

总结：组件内容分发技术, slot占位, 使用组件时传入替换slot位置的标签

显示默认内容

如果外面不给传, 想给个默认显示内容

使用方式：<slot>夹着内容默认显示内容, 如果不给插槽slot传东西, 则使用<slot>夹着的内容在原地显示

<slot>默认内容</slot>

1.3.2 具名插槽

当一个组件内有2处以上需要外部传入标签的地方

传入的标签可以分别派发给不同的slot位置

使用方式: v-slot一般用跟template标签使用 (template是html5新出标签内容模板元素, 不会渲染到页面上, 一般被vue解析内部标签)

总结:

• slot的name属性起插槽名

• 使用组件时, template配合,使用v-slot进行绑定插槽的名称

• v-slot:可以简化成#使用

• v-bind可以省略成: v-on: 可以省略成@ v-slot: 可以简化成#

1.3.3 作用域插槽

• 使用组件插槽技术时, 需要用到子组件内变量，使用作用域插槽。

• 也就是子组件数据传递到父组件中。

使用方式:

1. 子组件, 在slot上绑定属性和子组件内的值。

2. 使用组件, 传入自定义标签, 用template和v-slot="scope" (自定义变量名)。

3. scope变量名自动绑定slot上所有属性和值。

总结: 组件内变量绑定在slot上, 然后使用组件v-slot="变量" 变量上就会绑定slot身上属性和值