slot | 易学教程

本文涉及的slot有：<slot>，v-slot吗，vm.$slots，vm.$scopedSlots

废弃的使用特性：slot，slot-scope，scope（使用v-slot，2.6.0）。

<slot>为vue的内置标签：用于给组件定义一个插槽，在这个插槽里传入内容（可以是模板代码或者组件），达到动态改变组件的目的。

v-slot指令：绑定内容到指定插槽，v-slot 只能添加在一个 <template> 上（当父组件中只提供了默认插槽的内容，v-slot可以写在组件上，见下面默认插槽缩写语法）

给插槽设置默认内容，在没有提供内容的时候被渲染。

<button type="submit">
  <slot>Submit</slot>
</button>

具名插槽

栗子：<base-layout> 组件

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>//默认插槽，不带 name 的 <slot> 出口会带有隐含的名字“default”。
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

使用v-slot绑定内容到指定插槽（v-slot缩写为#，后面必须跟插槽名）

<base-layout>
  <template #header>
    <h1>Here might be a page title</h1>
  </template>
  //放入默认插槽中  
  <p>A paragraph for the main content.</p>
  <p>And another one.</p>
   //放入默认插槽中  
  <template #default>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </template>

  <template #footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

没被包裹在有 v-slot 或包裹在v-slot为default的<template> 中的内容，会被视为默认插槽的内容。

v-slot使用动态插槽名：

<base-layout>
  <template #[dynamicSlotName]>
    ...
  </template>
</base-layout>

具有prop的插槽（作用域插槽）

作用：让插槽内容能够访问子组件中的数据

<slot :userNmae="user.name">//userNmae叫做插槽prop
</slot>


//父作用域中，v-slot的值为包含默认插槽所有prop一的个对象，对象名取为slotProps
 <template #default="slotProps">
    {{ slotProps.userNmae }}
  </template>

作用域插槽的使用：基于输入的 prop 渲染出不同的内容，达到复用插槽的目的。

解构插槽prop

在支持的环境下 (单文件组件或支持解构语法的浏览器)，可以在v-slot里使用参数解构。

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

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

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

//参数默认值，用于插槽 prop 是 undefined 的情形
<current-user v-slot="{ user = { firstName: 'Guest' } }">
  {{ user.firstName }}
</current-user>

//user 重命名为 person
<current-user v-slot="{ user: person }">
  {{ person.firstName }}
</current-user>

只提供了默认插槽内容时的v-slot简写

当被提供的内容只有默认插槽时，v-slot 直接用在组件上

<current-user v-slot="slotProps"> {{ slotProps.user.firstName }} </current-user>

只要出现多个插槽，请始终为所有的插槽使用完整的基于 <template> 的语法：

<current-user>
  <template v-slot:default="slotProps"> {{ slotProps.user.firstName }} </template> <template v-slot:other="otherSlotProps"> ... </template> </current-user>

vm.$slots

组件vm.$slots.插槽名，返回对应插槽的内容。

栗子：

<anchored-heading :level="1">Hello world!</anchored-heading>

anchored-heading组件的模板为：

Vue.component('anchored-heading', {
  render: function (createElement) {
    return createElement(
      'h' + this.level,  
      this.$slots.default 
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

anchored-heading 中的 Hello world!，这些子元素被存储在组件实例中的 $slots.default 中

vm.$scopedSlots

访问作用域插槽，得到的是一个返回 VNodes 的函数。

props: ['message'],
render: function (createElement) {
  // `<div><slot :text="message"></slot></div>`
  return createElement('div', [
    this.$scopedSlots.default({
      text: this.message
    })
  ])
}

在使用渲染函数，不论当前插槽是否带有作用域，推荐通过 $scopedSlots 访问。

来源：oschina

链接：https://my.oschina.net/u/4306777/blog/3610468

标签

Here

Vue.js