插槽学习与理解

基础

如果组件没有包含一个 元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃。
如果你在模板中写入了

/* my-component */
<div><slot></slot></div>

调用这个组件时,插槽内可以包含任何模板代码

<my-component>slot in this</my-component>
or
<my-component><el-color-picker></el-color-picker></my-component>

当组件渲染的时候， 将会被替换为“slot in this”。或者颜色选择器

编译作用域

在模板中的插槽中使用数据时，与模板的其他地方一样可以访问相同的实例属性(也就是相同的‘作用域’),而不能访问声明该插槽的组件的作用域。

<navigation-link url="/profile">
  Clicking here will send you to: {{ url }}
  <!--
  这里的 `url` 会是 undefined，因为 "/profile" 是
  _传递给_ <navigation-link> 的而不是
  在 <navigation-link> 组件*内部*定义的。
  -->
</navigation-link>

作为一条规则，请记住：
父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

后备内容(插槽的默认值)

写在<slot>默认值</slot>里面

具名插槽

当需要多个插槽，我们使用名字来帮助分发。

// base-layout组件
<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

// 模板
<base-layout>
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>
<!-- #号是v-slot的简写方式 -->
  <template #:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

注意 v-slot 只能添加在 上 (只有一种例外情况)，这一点和已经废弃的 slot attribute 不同。(那就是只有组件只有默认插槽，这时可以写在组件上<slot-component v-slot="slotProps">

作用域插槽

我们可以在包含插槽的组件中向插槽提供组件的数据，例如

<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>

绑定在 元素上的 attribute 被称为插槽 prop。现在在父级作用域中，我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字：

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

现在slotProps就是插槽prop对象的名称
我们还可以用es2015析构插槽propv-slot="{ user = { firstName: 'Guest' } }"
用动态指令参数来定义动态插槽名v-slot:[dynamicSlotName]

废弃了的语法

v-slot 指令自 Vue 2.6.0 起被引入，提供更好的支持 slot 和 slot-scope attribute 的 API 替代方案。v-slot 完整的由来参见这份 RFC。在接下来所有的 2.x 版本中 slot 和 slot-scope attribute 仍会被支持，但已经被官方废弃且不会出现在 Vue 3 中。