在 2.6.0 中,我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即v-slot 指令)。它取代了slot 和slot-scope 这两个目前已被废弃但未被移除且仍在文档中的特性。
匿名插槽
//子组件
<template>
<div>
<slot></slot>
</div>
</template>
<script>
export default {
name: 'children'
}
</script>
//父组件
<children>代替slot的内容</children>
具名插槽
自 2.6.0 起有所更新。已废弃的使用slot 特性的语法在这里。
有时我们一个组件里面需要多个插槽。我们怎么来区分多个slot,而且不同slot的显示位置也是有差异的.对于这样的情况, 元素有一个特殊的特性:name。这个特性可以用来定义额外的插槽:
注意:一个不带 name 的 出口会带有隐含的名字“default”。
//子组件
<template>
<div>
<header>
<slot name="header"></slot>
<slot></slot>
</header>
<main>
<slot></slot>
</main>
</div>
</template>
在向具名插槽提供内容的时候,我们可以在一个 元素上使用 v-slot 指令,并以 v-slot 的参数的形式提供其名称:
//父组件
<!-- old -->
<children>
<template slot="header">
<h1>Here might be a page title</h1>
</template>
<template slot="default">
<p>A paragraph for the main content.</p>
<p>And another one.</p>
</template>
</children>
<!-- new -->
<children>
<template v-slot:header>
<!-- <template #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>
</children>
注意:v-slot
只能添加在一个<template>
(只有一种例外情况),这一点和已经废弃的slot
特性不同。
例外:当被提供的内容只有默认插槽时,组件的标签才可以被当做插槽的模板来使用。这样我们就可以把v-slot直接用在组件上。
作用域插槽
自 2.6.0 起有所更新。已废弃的使用slot-scope 特性的语法在这里。
有时候,插槽的内容有需要访问到子组件里面的内容,类似子组件里的slot可以绑定一些当前作用域,从而传出来,使用组件时,插槽的内容就可以拿到slot传出来的数据,父级的插槽内容可用。
如下,让后备内容(slot默认内容)user.firstName 替换正常情况下的user.lastName
<span>
<slot>
{{ user.lastName}}
</slot>
</span>
绑定在 <slot>
元素上的特性被称为插槽 prop。现在在父级作用域中,我们可以给 v-slot 带一个值来定义我们提供的插槽 prop 的名字:
<span>
<slot :user="user">
{{ user.lastName }}
</slot>
</span>
在父级作用域中,我们可以给 v-slot 带一个值来定义我们提供的插槽 prop 的名字,slotProps可以任意命名的,通过slotProps.user就拿到了子组件slot传出来的对象。
<!-- old -->
<children>
<template slot="default" slot-scope="slotProps">
{{ slotProps.user.firstName }}
</template>
</children>
<!-- new -->
<children>
<template v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</template>
</children>
在上述情况下,当被提供的内容只有默认插槽时,这样我们就可以把v-slot直接用在组件上:
<children v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</children>
<!-- default可以省略,默认插槽的缩写语法 -->
<children v-slot="slotProps">
{{ slotProps.user.firstName }}
</children>
<!-- 解构插槽 -->
<children v-slot="{ user }">
{{ user.firstName }}
</children>
<!-- user重命名为person -->
<children v-slot="{ user: person }">
{{ person.firstName }}
</children>
注意:默认插槽的缩写语法不能和具名插槽混用,因为它会导致作用域不明确,只要出现多个插槽,请始终为所有的插槽使用完整的基于 <template>
的语法。
后备内容
什么事后备内容呢?一个slot有它默认的内容,有时为一个插槽设置具体的后备(也就是默认的)内容是很有用的,它只会在没有提供内容的时候被渲染。