插槽简写,作用域插槽。

插槽的简写 (# 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...