Vue插槽学习笔记

插槽内容

创建示例组件slotdemo.vue

注册组件

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

使用组件

传入内容组件标签外内容

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

后备内容

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

后备内容

具名插槽

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

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

  传入内容到插槽1

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

作用域插槽

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

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

默认插槽后备内容

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

  {{slotProps.user.lastName + slotProps.user.firstName}}

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

解构插槽Prop

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

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

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

  {{user.lastName + user.firstName}}

解构prop时能重命名

  {{person.lastName}}

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

默认插槽后备内容

  {{user.lastName}}

具名插槽的缩写

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

  传入内容到插槽1

  {{user.firstName}}

slot和slot-scope特性

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

   
传入内容到默认插槽

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

插槽1后备内容

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

默认插槽后备内容

  

    {{slotProps.user.lastName}}
  
        

解构prop

  

    {{user.lastName}}
  

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