关于vue.js:Vue-仔细说一说vue的插槽语法02

48次阅读

共计 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…

正文完
 0