使用场景:vue提供组件插槽能力, 允许开发者在封装组件时,把不确定的部分定义为插槽 ‘
<slot>
夹着内容默认显示内容, 如果不给插槽slot传东西, 则使用<slot>
夹着的内容在原地显示
组件进阶 - 具名插槽 slot 作为占位符 定义名字 使用 name 然后使用 template #title 或者 v-slot = title 回应占位符
==v-slot可以简化成#使用==
当一个组件内有2处以上需要外部传入标签的地方 ;
传入的标签可以分别派发给不同的slot位置 ;
v-slot一般用跟template标签使用 (template是html5新出标签内容模板元素, 不会渲染到页面上, 一般被vue解析内部标签)
组件进阶 - 作用域插槽
子组件里值, 在给插槽赋值时在父组件环境下使用
// 目标: 作用域插槽
// 场景: 使用插槽, 使用组件内的变量
// 1. slot标签, 自定义属性和内变量关联
// 2. 使用组件, template配合v-slot="变量名"
// 变量名会收集slot身上属性和值形成对象
![](/i/l/?n=22&i=blog/2930946/202210/2930946-20221022085940477-1504770848.png)