vue组件进阶-插槽
什么是插槽
- 组件通过插槽传入自定义结构。
- 用于实现组件的内容分发，通过slot标签，可以接收到写在组件标签内的内容。
- vue提供组件插槽能力，允许开发者在封装组件时，把不确定的定义为插槽。
插槽分为三种：默认插槽、具名插槽和作用域插槽
默认插槽
格式
在定义组件时，在template中用slot来占个坑；
使用时，将组件之间的内容来填坑；
具名插槽
使用背景：当一个组件内有两处以上需要外部传入标签的地方
格式
定义：<slot name="xxx">
使用：
<template #xxx> </template>;<template v-slot:xxx> </template>两种方法取其一即可
图示：
1.传入的标签可以分别派发给不同的slot位置。
2. v-slot一般跟template标签使用。(template是html5新出标签内容模板元素，不会渲染到页面上，一般被vue内部解析为内部标签)
小结
- slot有可以设置多个。
- 定义组件时：slot的name属性起插槽名。
- 使用组件时，template配合#插槽名传入具体html标签或组件。
作用域插槽
作用背景： 子组件中的数据，在给插槽赋值时在父组件环境下使用（子数据传入父组件）
步骤
- 创建子组件, 准备slot, 在slot上绑定属性和子组件值。
- 使用子组件, 传入自定义标签, 用template和v-slot="自定义变量名"。
- 自定义变量名会自动绑定slot上所有属性, 就可以使用子组件内值, 并替换slot位置。 图示：
小结
组件内变量绑定在slot上, 然后使用组件v-slot:插槽名字="变量" ，变量上就会绑定slot传递的属性和值
