Vue:v-slot 插槽指令

2,642 阅读4分钟

slot是什么

Vue的slot,是组件的一块HTML模版,这块模版由使用组件者即父组件提供。可以说是子组件暴露的一个让父组件传入自定义内容的接口。【在实际项目开发当中,时常会把父组件的内容与子组件自己的模板混合起来使用。而这样的一个过程在Vue中被称为内容分发。也常常被称为slot(插槽)。其主要参照了当前Web Components规范草案,使用特殊的元素作为原始内容的插槽。今天主要来学习如何在Vue中使用slot的功能】

slot的作用

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

slot怎么用

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>

<style scoped>
div{
 border: 1px solid #000;  
}
</style>

父组件中在使用时:

  • 默认插槽的话直接在子组件的标签内写入内容即可

  • 具名插槽是在默认插槽的基础上加上slot属性,值为子组件插槽name属性值

  • 作用域插槽则是通过slot-scope获取子组件的信息,在内容中使用。这里可以用解构语法去直接获取想要的属性

// Parent.vue
<child>
  <!-- 默认插槽 -->
  <div>默认插槽</div>  
  <!-- 具名插槽 -->
  <div slot="header">具名插槽header</div>
  <!-- 作用域插槽 -->
  <div slot="footer" slot-scope="slotProps">
    {{slotProps.testProps}}
  </div>
</child>

v-slot

在vue2.6中,上述的API被软废弃(3.0正式废弃),取而代之的是内置指令v-slot,可以缩写为【#】

子组件用法保持不变,父组件中

  • slot属性弃用,具名插槽通过指令参数v-slot:插槽名 的形式传入,可以简化为 #插槽名。

  • slot-scope属性弃用,作用域插槽通过v-slot:xxx="slotProps"的slotProps来获取子组件传出的属性

  • 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>

拓展用法

1.同样可以通过解构获取v-slot={user},还可以重命名v-slot="{user: newName}"和定义默认值v-slot="{user = '默认值'}" 2.插槽名可以是动态变化的 v-slot:[slotName]

注意: 1.默认插槽名为default,可以省略default直接写v-slot,缩写为#时不能不写参数,写成#default(这点所有指令都一样,v-bind、v-on) 2.多个插槽混用时,v-slot不能省略default

作用域插槽的原理

slot本质上是返回VNode的函数,一般情况下,Vue中的组件要渲染到页面上需要经过template >> render function >> VNode >> DOM 过程。 组件挂载的本质就是执行渲染函数得到VNode,至于data/props/computed这些属性都是给VNode提供数据来源。

在2.5之前,如果是普通插槽就直接是VNode的形式了,而如果是作用域插槽,由于子组件需要在父组件访问子组件的数据,所以父组件下是一个未执行的函数 (slotScope) => return h('div', slotScope.msg) ,接受子组件的slotProps参数,在子组件渲染实例时会调用该函数传入数据。

在2.6之后,两者合并,普通插槽也变成一个函数,只是不接受参数了。