介绍
通常,您需要允许您的家长视图组件嵌入儿童组件中的任意内容。
<$>[注] 注: 如果您来自角度背景,这是类似于 transclusion 或 内容投影的概念。
在本教程中,您将探索一个具有家长组件和儿童组件的示例Vue项目,该组件与插槽共享内容。
前提条件
如果您想跟随这篇文章,您将需要:
- 对 设置 Vue.js 项目和使用家长和儿童组件的一些熟悉将是有益的
本教程已通过 Node v15.10.0、npm v7.6.0 和 vue v2.6.11 进行验证。
使用 Slots
要允许父母组件将DOM元素传输到儿童组件中,请在儿童组件内提供一个<slot>元素。
以下是包含一个<slot>的ChildComponent的示例:
1[label ChildComponent.vue]
2<template>
3 <div>
4 <p>This is the child component.</p>
5 <slot></slot>
6 </div>
7</template>
下面是一個「父母組件」的例子,其中包含「兒童組件」的內容:
1[label ParentComponent.vue]
2<template>
3 <div>
4 <p>This is the parent component.</p>
5 <ChildComponent>
6 <p>This is injected content from the parent component.</p>
7 <p>It can still bind to data in the parent's scope: {{myVariable}}</p>
8 </ChildComponent>
9 </div>
10</template>
11
12<script>
13import ChildComponent from './ChildComponent.vue';
14
15export default {
16 components: {
17 ChildComponent
18 },
19 data() {
20 return {
21 myVariable: `Parent Variable`
22 }
23 }
24}
25</script>
在 Web 浏览器中查看应用程序会产生以下结果:
1[secondary_label Output]
2<div>
3 <p>This is the parent component.</p>
4 <div>
5 <p>This is the child component.</p>
6 <p>This is injected content from the parent component.</p>
7 <p>It can still bind to data in the parent's scope: Parent Variable</p>
8 <div>
9</div>
父母组件的内容和数据被注入到儿童组件中。
提供 Fallback 内容
如果家长组件不将任何内容注入儿童组件的<slot>,儿童组件将返回其<slot>标签中的任何元素:
以下是带落后内容的ChildComponent的例子:
1[label ChildComponent.vue]
2<template>
3 <div>
4 <p>This is the child component.</p>
5 <slot>
6 <p>Fallback Content</p>
7 </slot>
8 </div>
9</template>
以下是具有两个儿童组件的家长组件的例子 - 一个具有插槽内容,一个没有:
1[label ParentComponent.vue]
2<template>
3 <div>
4 <p>This is the parent component with slot data.</p>
5 <ChildComponent>
6 <p>Slot Content</p>
7 </ChildComponent>
8 <p>This is the parent component without slot data.</p>
9 <ChildCmponent></ChildComponent>
10 </div>
11</template>
12
13<script>
14import ChildComponent from './ChildComponent.vue';
15
16export default {
17 components: {
18 ChildComponent
19 }
20}
21</script>
在 Web 浏览器中查看应用程序会产生以下结果:
1[secondary_label Output]
2<div>
3 <p>This is the parent component with slot data.</p>
4 <div>
5 <p>This is the child component.</p>
6 <p>Slot Content</p>
7 <div>
8 <p>This is the parent component without slot data.</p>
9 <div>
10 <p>This is the child component.</p>
11 <p>Fallback Content</p>
12 <div>
13</div>
落后内容出现时,插槽内容不是由主组件提供。
<$>[注]
注: 如果小组件 <template> 中没有 <slot> 元素,则来自母组件的任何内容将被默默地丢弃。
这完成了使用<slot>和陷阱的简短介绍。
使用名称 Slots
有一个<slot>元素注入内容可以满足一些用例,但是,你可能有其他用例,你想利用多个<slot>元素。
命名的插槽是<slot>元素,具有一个名称属性,允许注入命名空间的内容:
1<slot name="slotName"></slot>
考虑一个示例组件,其中包含名为主和侧面的插槽:
1[label ChildComponent.vue]
2<template>
3 <div>
4 <main>
5 <slot name="main"></slot>
6 </main>
7 <aside>
8 <slot name="aside"></slot>
9 </aside>
10 <slot></slot>
11 </div>
12</template>
主组件填充了主和旁边插槽. 没有提到命名插槽的内容填充了空插槽:
1[label ParentComponent.vue]
2<template>
3 <div>
4 <ChildComponent>
5 <template v-slot:main>
6 <p>Custom Main</p>
7 </template>
8 <template v-slot:aside>
9 <p>Custom Aside</p>
10 </template>
11 <div>
12 <p>Custom Content</p>
13 </div>
14 </ChildComponent>
15 </div>
16</template>
17
18<script>
19import ChildComponent from './ChildComponent.vue';
20
21export default {
22 components: {
23 ChildComponent
24 }
25}
26</script>
<$>[注] **注:**在Vue 2.6.0之前,你会使用‘slot’属性。自那以后,它被‘v-slot’指令取代了。
在 Web 浏览器中查看应用程序会产生以下结果:
1[secondary_label Output]
2<div>
3 <div>
4 <main>
5 <p>Custom Main</p>
6 </main>
7 <aside>
8 <p>Custom Aside</p>
9 </aside>
10 <p>Custom Errata</p>
11 <div>
12</div>
这完成了使用命名插槽的简短介绍。
结论
在本教程中,您探索了一个Vue项目,其中包含一个家长组件和一个孩子组件的示例,该组件与插槽共享内容。
如果您想了解有关 Vue.js 的更多信息,请参阅 我们的 Vue.js 主题页面以获取练习和编程项目。