共计 1135 个字符，预计需要花费 3 分钟才能阅读完成。
插槽简写，作用域插槽。
插槽的简写 (# vue 2.6.0 新增)
v-slot: –> #
就和 v-bind: 简写为 : 以及 v-on: 简写为 @ 一样，v-slot: 也领有本人的简写符号 #
留神：v-slot: 要和旧语法做辨别
// ↓ 上面是伪代码
v-slot: === :slot !== v-slot: (v-slot: 和 :slot 都是旧语法)
作用域插槽 (vue 2.6.0 有更新)
留神 slot-scope 是旧语法，曾经废除，理解但不要学习，防止混同。
让应用处的 html 可能拜访散发处的信息很有必要，因而呈现了作用域插槽。
在散发处将须要传递的信息利用属性名 + 属性值的形式卸载 <slot> 标签上，应用处就能够以通过一个 slotProps 对象来拜访传递的信息。（个别会配合解构语法间接解构对应的 key，举荐应用解构语法）
↓ Panel.vue
<template id='panel'>
<div class="panel">
<div class="title">
<slot name='s1' msg="散发处的信息" index="1"></slot>
</div>
</div>
</template>// ↓ 最根底的应用
<div id="app">
<Panel>
<template v-slot:s1="obj">
<span> 信息: {{obj.msg}} </span>
<span> 序号: {{obj.index}} </span>
</template>
</Panel>
</div>// ↓ 理论我的项目中个别这么写 (插槽的简写#，属性解构)
<div id="app">
<Panel>
<template #s1="{msg, index}">
<span> 信息: {{msg}} </span>
<span> 序号: {{index}} </span>
</template>
</Panel>
</div>再进一步，vue 2.6.0 之后反对动静插槽名
<base-layout>
<template v-slot:[dynamicSlotName]>
...
</template>
</base-layout>这一个性能够用于 v -for 批量渲染。
对于作用域插槽有一点补充
应用作用域插槽，如
<template #s1="{msg}">
<span> 信息: {{msg}} </span>
</template>v-slot: 前面必须有参数，即必须有插槽名称 ”s1″
具名插槽有本人定义的名称 (<slot name=”slotName”>)。
对匿名插槽，插槽名称是 default。
<template #default="{msg}">
<span> 信息: {{msg}} </span>
</template>完结。
同步更新到本人的语雀
https://www.yuque.com/diracke…