VUE插槽深入了解

@

目录

• 1.插槽内容
• 2.编译作用域
• 2.后备内容
• 3.具名插槽
  • 具名插槽的缩写
• 4.作用域插槽
  • 独占默认插槽的缩写语法
• 5.动态插槽名

---

1.插槽内容

插槽slot一般适用于咱们自定义的组件的。在咱们使用自定义组件的时候，难免要把父元素的一些内容给传到组件中进行渲染，这时候就可以用到插槽了，实例如下：

<navigation-link url="/profile">
  Your Profile
</navigation-link>

<a
  v-bind:href="url"
  class="nav-link"
>
  <slot></slot>
</a>

这样在子组件被渲染的时候，组件内部我们传入的元素，就会被渲染到子组件中的slot标签下。
如果在子组件中没有slot这个标签，则在组件中传入任何的元素，都会被舍弃。

2.编译作用域

在使用组件往组件中传值的时候，我们难免需要传递的元素可以访问到组件中的作用域的值，但是我们由于有编译作用域，所以普通的直接传入是无法使用的，之后我会讲要来如何使用子组件作用域中的值。

<navigation-link url="/profile">
  Logged in as {{ user.name }}
</navigation-link>

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

上面实例就是解释了编译作用域。

2.后备内容

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

我们希望在组件中，在使用这个组件时，如果没有传入值的情况下有一些默认内容出现在插槽内，我们可以使用上面的方法。
如果我们提供了内容，则会取代我们的默认内容。

3.具名插槽

有时候我们需要多个插槽，来插入子组件的不同位置，我们需要具名插槽来实现。

例如对于一个带有如下模板的 <base-layout> 组件：

<div class="container">
  <header>
    <!-- 我们希望把页头放这里 -->
  </header>
  <main>
    <!-- 我们希望把主要内容放这里 -->
  </main>
  <footer>
    <!-- 我们希望把页脚放这里 -->
  </footer>
</div>

对于这样的情况，<slot> 元素有一个特殊的 attribute：name。这个 attribute 可以用来定义额外的插槽：

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

一个不带 name 的 <slot> 出口会带有隐含的名字“default”。

用下面的v-slot属性来为我们的slot进行匹配。

<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>

  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>
//细致的写法
<template v-slot:default>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </template>

现在 <template> 元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有 v-slot 的 <template> 中的内容都会被视为默认插槽的内容。

注意 v-slot 只能添加在 <template> 上 (只有一种例外情况)。

具名插槽的缩写

就是用下面的方式吧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 #footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

和其它指令一样，该缩写只在其有参数的时候才可用。这意味着以下语法是无效的：

<!-- 这样会触发一个警告 -->
<current-user #="{ user }">
  {{ user.firstName }}
</current-user>

4.作用域插槽

有时让插槽内容能够访问子组件中才有的数据是很有用的。

<span>
  <slot>{{ user.lastName }}</slot>
</span>

为了让 user 在父级的插槽内容中可用，我们可以将 user 作为 <slot> 元素的一个 attribute 绑定上去：

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

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

独占默认插槽的缩写语法

在上述情况下，当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用。这样我们就可以把 v-slot 直接用在组件上：

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

这种写法还可以更简单。就像假定未指明的内容对应默认插槽一样，不带参数的 v-slot 被假定对应默认插槽：

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

注意默认插槽的缩写语法不能和具名插槽混用，因为它会导致作用域不明确：

5.动态插槽名

动态指令参数也可以用在 v-slot 上，来定义动态的插槽名：

<base-layout>
  <template v-slot:[dynamicSlotName]>
    ...
  </template>
</base-layout>