组件插槽的使用(组件进阶)

vue中的插槽：

1. 组件通过插槽传入自定义结构

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

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

下面详细介绍插槽使用 ：：：

一：默认插槽

格式：

在定义组件时，在template中用slot来占个坑；

使用时，将组件之间的内容来填坑；

如图示例：

二：具名插槽

当一个组件内有2处以上需要外部传入标签的地方 就需要使用具名插槽

格式：

定义： <slot name="xxx">

使用：

• <template #xxx></template>;

• <template v-slot:xxx></template>

 如图所示：

1. 传入的标签可以分别派发给不同的slot位置
2. v-slot一般跟template标签使用 (template是html5新出标签内容模板元素, 不会渲染到页面上, 一般被vue解析为内部标签)

v-slot可以简化成#使用 

小结

1. slot有可以设置多个
2. 定义组件时：slot的name属性起插槽名
3. 使用组件时, template配合#插槽名传入具体html标签或组件

三：作用域插槽

如图所示：

步骤

• 创建子组件, 准备slot, 在slot上绑定属性和子组件值
• 使用子组件, 传入自定义标签, 用template和v-slot="自定义变量名"
• 自定义变量名会自动绑定slot上所有属性, 就可以使用子组件内值, 并替换slot位置

具名插槽, 给slot绑定属性和值 ：示例如下

 

组件内变量绑定在slot上, 然后使用组件v-slot:插槽名字="变量" ，变量上就会绑定slot传递的属性和值