VUE v-slot插槽
具名插槽
在 2.6.0+ 中已弃用

先前,我们使用具名插槽来自定义模板内容,例如,一个假设的 组件的模板如下:

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

在向具名插槽提供内容的时候,我们可以在一个父组件的 元素上使用 slot 特性:

<base-layout>
  <template 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 slot="footer">
    <p>Here's some contact info</p>
  </template>
</base-layout>

或者直接用在一个普通的元素上:

<base-layout>
  <h1 slot="header">Here might be a page title</h1>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <p slot="footer">Here's some contact info</p>
</base-layout>

上述两个示例渲染出来的 HTML 都将会是:

<div class="container">
  <header>
    <h1>Here might be a page title</h1>
  </header>
  <main>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </main>
  <footer>
    <p>Here's some contact info</p>
  </footer>
</div>

我们可以使用 v-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>

就是这么简单,插槽的名字现在通过 v-slot:slotName 这种形式来使用。

Tips: 没有名字的 隐含有一个 “default” 名称

例如,上面的默认插槽,如果你想显示调用的话,可以这样:

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

  <template v-slot:default>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </template>

  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

无论哪种方式,上面的代码都将输出为下面代码:

<div class="container">
  <header>
    <h1>Here might be a page title</h1>
  </header>
  <main>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </main>
  <footer>
    <p>Here's some contact info</p>
  </footer>
</div>

请注意, v-slot 只能添加到 <template> 或自定义组件上,这点与弃用的 slot 属性不同

作用域插槽
在 2.6.0+ 中已弃用

有时候,我们想在父组件中访问子组件内部的一些可用数据。例如,假设有一个下面模板的 <current-user> 组件:

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

我们可能想用用户的名字来替换掉插槽里面的姓,于是我们这样写:

<current-user>
  {{ user.firstName }}
</current-user>

很不幸,上面这段代码不能如你预期那样工作,因为当前代码的作用域环境是在父组件中,所以它访问不了 <current-user> 内部的数据。

为了解决这个, 我们可以在 <current-user> 内部的 <slot> 元素上动态绑定一个 user 对象属性:

<span>
  <!-- 完整 v-bind:user 下面是简写形式 -->
  <slot :user="user">
    {{ user.lastName }}
  </slot>
</span>

绑定到 <slot> 元素上的属性我们称之为 slot props。现在,在父作用域中,我们可以通过 slot-scope 来访问 user 数据了:

<current-user>
  <template slot-scope="slotProp">
    {{ slotProp.user.firstName }}
  </template>
</current-user>

同样的,我们使用 v-slot 重构上面的代码:

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

或者直接作用在 <current-user> 上的写法:

<!-- 省略默认插槽名字 -->
<current-user v-slot="slotProp">
  {{ slotProp.user.firstName }}
</current-user>

<!-- 显示调用默认插槽名字 -->
<current-user v-slot:default="slotProp">
  {{ slotProp.user.firstName }}
</current-user>

在这个栗子中,我们选择 slotProp 作为我们的 slot props 名字,但你可以使用你喜欢的任何名字。

单个默认插槽的缩写形式
在上述情况下,当且仅当提供了默认插槽内容时,我们可以使用 v-slot 直接作用在组件上:

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

我们可以简化上面的的默认插槽写法:

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

请注意了,默认插槽的缩写语法不能与具名插槽混用:

<!-- 控制台将报警告:-->
<!-- To avoid scope ambiguity, the default slot should also use <template> syntax when there are other named slots. -->
<!-- 意思就是说,为了避免作用域模糊 -->
<!-- 当有其他具名插槽时,默认插槽也应当使用 '<template>' 模板语法 -->
<current-user v-slot="slotProps">
  {{ slotProps.user.firstName }}
  <template v-slot:other="otherSlotProps">
    slotProps is NOT available here
  </template>
</current-user>

于是,上面的代码,我们改写成:

<current-user>
 <!-- 两种写法均可 -->
  <!--<template v-slot="slotProps">
    {{ slotProps.user.firstName }}
  </template>-->
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>

  <template v-slot:other="otherSlotProps">
    ...
  </template>
</current-user>

插槽内容的解构赋值
在 Vue 代码内部,我们传递的 slotProps 其实就是函数的一个单一参数:

function (slotProps) {
  // ... slot content ...
}

这也就意味着 v-slot 的值只要满足函数参数定义的 JavaScript 表达式的都可以接受。因此,在支持的环境(单文件或现代浏览器)中,你还可以使用 ES2015 解构语法来提取特定的插值内容,例如:

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

代码看起来更简洁对吧。我们还可以重命名解构变量:

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

这给了我们很多自由操作的空间,你甚至可以自定义回退内容,以便在未定义插值情况下使用:

<current-user v-slot="{ user = { firstName: 'Guest' } }">>
  {{ user.firstName }}
</current-user>

动态插槽名称
2.6.0+ 新增

动态指令参数 也适用于 v-slot ,允许我们定义动态插槽名称:

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

命名插槽简写
2.6.0+ 新增

与 v-on 和 v-bind 类似,v-slot 也有一个简写,即使用 # 代替 v-slot。例如, v-slot:header 简写成 #header:

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

也就是说,如果你想使用简写语法,则务必指定插值的名字:

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

总结:
1、原来的vue插槽有三种 :匿名插槽 具名插槽和作用域插槽(solt-scope)
2、vue2.6+之后采用v-slot指令来代替原来的三种插槽
3、v-slot代替作用域插槽的时候子组件仍然需要绑定向父组件暴露的属性
4、v-slot属性可以简写成# 但是后面必须带有插槽名称才能简写
5、v-slot可以直接访问组件绑定的属性 不需要通过取名字 v-slot="{ user }"
6、v-slot最好都写在<templete>

Logo

前往低代码交流专区

更多推荐