vue 中 slot 的使用方式，以及作用域插槽的用法

分类：插槽又分为匿名插槽、具名插槽以及作用域插槽 ； 匿名插槽，我们又可以叫它单个插槽或者默认插槽

因为组件标签中间是不允许写内容的，但是可以插入 插槽 ；template 标签 ；

插槽的使用方法 ：

使用组件 

 

定义组件

 

 

 

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

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

 

组件进阶 - 具名插槽 slot 作为占位符 定义名字 使用 name 然后使用 template #title 或者 v-slot = title 回应占位符

ps：v-bind可以省略成: v-on: 可以省略成@ 那么v-slot: 可以简化成#

==v-slot可以简化成#使用==

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

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

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

 

组件进阶 - 作用域插槽 - 子组件传给父组件数据 

子组件里值, 在给插槽赋值时在父组件环境下使用

// 目标: 作用域插槽
// 场景: 使用插槽, 使用组件内的变量
// 1. slot标签, 自定义属性和内变量关联
// 2. 使用组件, template配合v-slot="变量名"
// 变量名会收集slot身上属性和值形成对象