Vue插槽详解

简介

插槽：简单理解就是组件内部留一个或多个的插槽位置，可供组件传对应的模板代码进去。插槽的出现，让组件变的更加灵活。

一、匿名插槽

//  组件（父）
  <my-component>
    <p>hello,world!</p>
  </my-component>

//  组件内部（子）
    <div class="child-page">
        <h1>子页面</h1>
        <slot></slot>  //  替换为 <p>hello,world!</p>
    </div>

//  渲染结果
    <div class="child-page">
        <h1>子页面</h1>
        <p>hello,world!</p>
    </div>

以上是最简单的匿名插槽eg

二、具名插槽

顾名思义就是带名字的插槽，假如需要在组件内部预留多个插槽位置，就需要为插槽定义名字，指定插入的位置。

//  组件（父）
  <my-component>
    <template v-slot:header>
      <p>头部</p>  
    </template>
    <template v-slot:footer>
      <p>脚部</p>
    </template>
    <p>身体</p>
  </my-component>

//  组件内部（子）
    <div class="child-page">
        <h1>子页面</h1>
        <slot name="header"></slot>
        <slot></slot>  //  等价于 <slot name="default"></slot>
        <slot name="footer"></slot>
    </div>

//  渲染结果
    <div class="child-page">
        <h1>子页面</h1>
        <p>头部</p>
        <p>身体</p>
        <p>脚部</p>
    </div>

vue >=2.6.0版本，使用v-slot替代slot 和 slot-scope。

注意三点

• 具名插槽的内容必须使用模板<template></template>包裹
• 不指定名字的模板插入匿名插槽中，推荐使用具名插槽，方便代码追踪且直观清楚
• 匿名插槽具有隐藏的名字"default"

三、具名插槽的缩写和动态插槽名

具名插槽缩写

  <my-component>
    <template #header>
      <p>头部</p>  
    </template>
    <template #footer>
      <p>脚部</p>
    </template>
    <template #body>
      <p>身体</p>
    </template>
  </my-component>

动态插槽名

  <my-component>
    <template #[headerPart]>  //  v-slot:[headerPart]
      <p>头部</p>  
    </template>
    <template #footer>
      <p>脚部</p>
    </template>
    <template #body>
      <p>身体</p>
    </template>
  </my-component>

  ...
  data() {
    return {
      headerPart: 'header'
    }
  }

四、插槽参数传递

父传子

//  组件（父）
  <my-component
    :title="'我是'"
  >
    <template #header>
      <p>头部</p>  
    </template>
    <template #footer>
      <p>脚部</p>
    </template>
    <template #body>
      <p>身体</p>
    </template>
  </my-component>

//  组件内部（子）
    <div class="child-page">
        <h1>{{title}}子页面</h1>
        <slot name="header"></slot>
        <slot name="body"></slot>
        <slot name="footer"></slot>
    </div>
    props: {
        title: {
            type: String
        }
    }

以下这种传参是错误的

  <my-component
    :title="'我是'"
  >
    <template #header>
      <p>{{title}}头部</p>  //  错误
    </template>
    <template #footer>
      <p>脚部</p>
    </template>
    <template #body>
      <p>身体</p>
    </template>
  </my-component>

所以如果需要动态修改插槽的内容，就需要子组件传参给父组件。

子传父

//  组件（父）传参并接受参数
  <my-component
    v-bind="layout"  //  传递参数
  >
//  可以使用ES6解构{ slotProps }
    <template #header="slotProps">  //  接受参数
      <p>{{slotProps.headers}}</p>
    </template>
    <template #footer="slotProps">
      <p>{{slotProps.footers}}</p>
    </template>
    <template #body="slotProps">
      <p>{{slotProps.bodys}}</p>
    </template>
  </my-component>

  ...
  data() {
    return {
      layout: {
        header: '头部',
        body: '身体',
        footer: '脚部'
      }
    }
  }

//  组件内部（子）
    <div class="child-page">
        <h1>子页面</h1>
        <slot name="header" :headers="header"></slot>
        <slot name="body" :bodys="body"></slot>
        <slot name="footer" :footers="footer"></slot>        
    </div>

  ...
    props: {
        header: {
            require: true
        },
        body: {
            require: true
        },
        footer: {
            require: true
        }
    }

总结：
父组件传参给子组件，props接收后，插槽slot再通过绑定属性传递参数返回给父组件，不管是模板代码还是数据，控制权完全掌握在父组件手里。