Vue.js slot 插槽

kraken81970
895 阅读3分钟

前言

在开始学习插槽的时候并不是很理解,看了一眼就过了,现在进入项目组后不得不看了,所以决定重新学习一遍,通俗来讲插槽(也就是slot)，是组件的一种HTML的模板，这块模板显示不显示、以及怎样显示由父组件来决定。实际上，一个slot最核心的两个问题在这里了，是显示不显示和怎样显示。

插槽内容

官方文档的解释:Vue实现了一套内容分发的API,将<slot>元素作为承载分发内容的出口.

插槽作用

让用户可以拓展组件，去更好地复用组件和对其做定制化处理。比如布局组件、表格列、下拉选项

在2.6.0之前有三种slot,默认插槽、具名插槽和作用域插槽

  • 插槽用标签来确定渲染的位置，里面放如果父组件没传内容时的后备内容
  • 具名插槽用name属性来表示插槽的名字，不传为默认插槽
  • 作用域插槽在作用域上绑定属性来将子组件的信息传给父组件使用，这些属性会被挂在父组件slot-scope接受的对象上。
// Child.vue
<template>
  <div>
    <main>
    <!-- 默认插槽 -->
        <slot>
          <!-- slot内为后备内容 -->
          <h3>没传内容</h3>
        </slot>
    </main>

    <!-- 具名插槽 -->
    <header>
        <slot name="header">
          <h3>没传header插槽</h3>
        </slot>
    </header>

    <!-- 作用域插槽 -->
    <footer>
        <slot name="footer" testProps="子组件的值">
          <h3>没传footer插槽</h3>
        </slot>
    <footer>
  </div>
</template>

//匿名插槽
<div>匿名插槽</div>
//具名插槽
<div slot="name">具名插槽</div>
//作用域插槽
<div slot="footer" slot-scope="slotProps">
{{slotProps.testProps}}//子组件的值
</div>

上述的属性在2.6.0时已经废用了,但同时新增了动态插槽(v-solt)

动态插槽(v-solt)用法

  1. v-solt:插槽名字 或者简写成 #插槽名 代替了之前的具名插槽
  2. slot-scope属性弃用，作用域插槽通过v-slot:xxx="slotProps"的slotProps来获取子组件传出的属性
  3. v-slot属性只能在<template>上使用，但在只有默认插槽时可以在组件标签上使用
//Parent
<template>
  <child>
   //默认插槽
   <template v-slot>
     <div>默认插槽</div>
   </template>
    //具名插槽
   <template #header>
     <div>具名插槽</div>
   </template>
   //作用域插槽
   <template #footer="slotProps">
     <div>
      {{slotProps.testProps}}
     </div>
   </template>
  <child>
</template>

插槽内容的解构赋值

我们还可以使用 ES2015 解构语法来提取特定的插值内容

<current-user v-slot="{ user }">
  {{ user.firstName }}
</current-user>

这样可以使模板更简洁，尤其是在该插槽提供了多个 prop 的时候。它同样开启了 prop 重命名等其它可能，例如将 user 重命名为 person：

<current-user v-slot="{ user: person }">
  {{ person.firstName }}
</current-user>

参考Vue插槽

avatar
文章
阅读
粉丝