VUE-插槽slot

一、概述

Vue 实现了一套内容分发的 API，即：将<slot></slot>元素作为承载分发内容的出口。

插槽作用： 父组件标签内插入任意内容,子组件内控制摆放位置。
插槽分类:

• 匿名插槽: 没有命名,有且只有一个
• 具名插槽: slot标签带name命名的
• 作用域插槽: 子组件内数据可以被父页面拿到(解决了数据只能从父页面传递给子组件的问题)

二、插槽的使用

1、匿名插槽

• 匿名插槽只有一个
• 一个不带 name 的 <slot> 出口会带有隐含的名字default
• 父组件调用带有插槽的子组件，并传入值给子组件，替代子组件的默认值

<slot>默认值</slot>

2、具名插槽

• slot 有name属性，可以有多个具名插槽
• 在父组件使用插槽时，任何没有被包裹在带有v-slot 中的内容都会被视为默认插槽的内容

定义子组件base-layout.vue

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

父组件使用插槽：
在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令，并以v-slot的参数的形式提供其名称：

<base-layout>
  <template v-slot:header>
    <h1>我是头部header</h1>
  </template>

  <p>未指定的内容默认归结为匿名插槽内容</p>

  <template v-slot:footer>
    <p>我是尾部footer</p>
  </template>
</base-layout>

注意：

• v-slot 只能添加在父组件的<template>上
• 匿名插槽的默认名称：v-slot:default，也可以不写
• 在 2.6.0 中，具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot指令)。它取代了slot 和 slot-scope这两个目前已被废弃但未被移除且仍在文档中的 attribute。

3、作用域插槽

（1）基本概念

• 父级模板里的所有内容都是在父级作用域中编译的；
• 子模板里的所有内容都是在子作用域中编译的。
• 作用域插槽让父组件能够访问子组件中才有的数据。

子组件：

 <slot name="todo" :user="user" :test="test">
    {{ user.lastName }}
 </slot> 
 
data() {
    return {
      user:{
        lastName:"张",
        firstName:"三"
      },
      test:[1,2,3,4]
    }
  },

说明：
插槽中的{{ user.lastName }}是默认数据，当父组件有内容后，会覆盖此处

父组件：

<todo-list>
 <template v-slot:todo="slotProps" >
   {{slotProps.user.firstName}}
 </template> 
</todo-list> 

说明：

• slotProps 可以随意命名
• slotProps 接取的是子组件标签slot上属性数据的集合所有v-bind:user="user"

（2）解构插槽Prop
当子组件插槽含有多个参数时，可以对插槽参数进行解构

父组件

<todo-list>
 <template v-slot:todo="{user,test}" >
   {{test}} 
 </template> 
</todo-list> 

子组件

<slot name="todo" :user="user" :test="test">
    {{ user.lastName }}
</slot> 

data() {
    return {
      user:{
        lastName:"Zhang",
        firstName:"yue"
      },
      test:[1,2,3,4]
    }
  }

（3）独占默认插槽
当子组件是 “独占默认插槽（子组件只含有默认插槽）” 时，组件的标签可以被当作插槽的模板（template）来使用。

父组件：

<todo-list v-slot:default="slotProps" >
   {{slotProps.user.firstName}}
</todo-list> 

子组件：

<slot :user="user" :test="test">
    {{ user.lastName }}
 </slot> 
data() {
    return {
      user:{
        lastName:"Zhang",
        firstName:"yue"
      },
      test:[1,2,3,4]
    }
  }

注意：

• v-slot 的缩写形式为为字符 #。 v-slot:header 可以被重写为#header

参考文章：
[1] 【Vue】vue2.6插槽slot使用详解（更新v-slot用法总结）