插槽简写,作用域插槽。
插槽的简写 (# 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...