Vue插槽学习笔记

插槽内容

创建示例组件slotdemo.vue

<template>
  <div class="slotdemo">
    <slot></slot>
  </div>
</template>

注册组件

import slotdemo from 'slotdemo.vue'
Vue.component('slotdemo',slotdemo)

使用组件

<slotdemo>传入内容</slotdemo>组件标签外内容

这样<slot><slot>就会替换为你传入内容(text、html或其他组件)，如果组件没包含<slot>元素,则该组件起始标签和结束标签之间的任何内容都会被抛弃。

后备内容

如果组件插槽里设置了默认内容，则使用组件没传内容时会显示默认内容

<slot>后备内容</slot>

<slotdemo></slotdemo>

具名插槽

当组件有多个插槽时，可以给插槽命名来区分不同插槽

<template>
  <div class="slotdemo">
    <div>
      <slot name="slotA">插槽1后备内容</slot>
    </div>
    <div>
      <slot>默认插槽后备内容</slot>
    </div>
    <div>
      <slot name="slotB">插槽2后备内容</slot>
    </div>
  </div>
</template>

通过v-slot指令可以在template标签，或者组件标签来指定插槽位置传入内容

<slotdemo>
  <template v-slot:slotA>
     传入内容到插槽1
  </template>
</slotdemo>

<slotdemo v-slot:slotA>
  传入内容到插槽1
</slotdemo>

一个不带name的插槽隐含的名字是default，可以不用指定，或v-slot:default。

作用域插槽

如果要调用组件里的数据，可以使用v-bind在slot标签上绑定,组件标签就可以通过插槽prop获取到数据

export default {
  data() {
    return {
      user: {
        firstName: '大大',
        lastName:'欧阳'
      }
    }
  }
}

<slot v-bind:user="user">默认插槽后备内容</slot>

<slotdemo>
  <template v-slot:default="slotProps">
    {{slotProps.user.lastName + slotProps.user.firstName}}
  </template>
</slotdemo>

以上指向默认插槽的写法还能更简单,直接在组件标签上指定插槽位置，并省略隐藏名

<slotdemo v-slot="slotProps">
  {{slotProps.user.lastName + slotProps.user.firstName}}
</slotdemo>

但如果和其他具名插槽混用，就要在template标签内指定，不然会报错

<slotdemo>
  <template v-slot="slotProps">
      {{slotProps.user.lastName}}
  </template>
  <template v-slot:slotB="slotProps">
    {{slotProps.user.firstName}}
  </template>
</slotdemo>

解构插槽Prop

作用域插槽的内部工作原理是将你的插槽内容包括在一个传入单个参数的函数里：

function (slotProps) {
  // 插槽内容
}

所以可以将插槽prop解构出来

<slotdemo v-slot="{user}">
  {{user.lastName + user.firstName}}
</slotdemo>

解构prop时能重命名

<slotdemo v-slot="{user:person}">
  {{person.lastName}}
</slotdemo>

甚至可以定义后备内容，但要使用缩写(下面介绍)，测试过原写法报错，后期应该会修复

<slot>默认插槽后备内容</slot>

<slotdemo #default="{user={lastName:'慕容'}}">
  {{user.lastName}}
</slotdemo>

具名插槽的缩写

v-slot可以用 # 缩写，跟v-on( @ )和v-bind( : )一样，例如v-slot:slot1可以写成#slot1,注意不带name时的缩写是#default

<slotdemo #slot1>
  传入内容到插槽1
</slotdemo>

<slotdemo #default="{user}">
  {{user.firstName}}
</slotdemo>

slot和slot-scope特性

slot和slot-scope特性是2.6.0版本前的语法，之后的版本被废弃。
通过slot属性可以在template标签、普通标签指定插槽位置,不具名插槽用default或不指定，在组件标签指定无效

<slotdemo>
  <template slot="slotA">
    传入内容到插槽1
  </template>
</slotdemo>

<slotdemo>
   <div slot="default">传入内容到默认插槽</div>
</slotdemo>

通过slot-scope属性在template指定作用域插槽

<slot :user="user" name="slotA">插槽1后备内容</slot>

<slotdemo>
  <template slot="slotA" slot-scope="slotProps">
    {{slotProps.user.lastName}}
  </template>
</slotdemo>

直接在普通标签指定默认插槽位置

<slot :user="user">默认插槽后备内容</slot>

<slotdemo>
  <div slot-scope="slotProps">
    {{slotProps.user.lastName}}
  </div>
</slotdemo>        

解构prop

<slotdemo>
  <div slot-scope="{user}">
    {{user.lastName}}
  </div>
</slotdemo>

官方文档：https://cn.vuejs.org/v2/guide/components-slots.html

Vue插槽学习笔记

原文：https://www.cnblogs.com/yuzizsj/p/11999951.html