用于实现组件的内容分发, 通过 slot 标签, 可以接收到写在组件标签内的内容
vue提供组件插槽能力, 允许开发者在封装组件时,把不确定的部分定义为插槽
1.3.1 匿名插槽
-
组件内用<slot></slot>占位
-
使用组件时夹着的地方, 传入标签替换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 作用域插槽
-
使用组件插槽技术时, 需要用到子组件内变量,使用作用域插槽。
-
也就是子组件数据传递到父组件中。
使用方式:
-
子组件, 在slot上绑定属性和子组件内的值。
-
使用组件, 传入自定义标签, 用template和v-slot="scope" (自定义变量名)。
-
scope变量名自动绑定slot上所有属性和值。
总结: 组件内变量绑定在slot上, 然后使用组件v-slot="变量" 变量上就会绑定slot身上属性和值