介绍
虽然 组件插槽满足某些用例,但还有其他情况下,您希望插槽中的模板能够访问插槽内容的儿童组件的数据,例如,如果您试图在容器中允许自定义模板,同时仍然保持访问这些容器的数据属性,则您将想要使用 scoped slot。
Scoped 组件插槽是视图 2.1 中引入的一项功能,它们允许您将孩子组件的属性传递到一个范围的插槽中,并从父母那里访问它们。
在本教程中,您将探索一个例子Vue项目,其中包含一个家长组件和一个孩子组件,该组件共享属性。
前提条件
如果您想跟随这篇文章,您将需要:
- 对 设置 Vue.js 项目和使用家长和儿童组件的一些熟悉将是有益的
<$>[注] 注:
在 Vue 2.6.0中,插槽的语法被更改,本教程将涵盖 2.6.0 语法。
本教程已通过 Node v15.10.0、npm v7.6.0 和 vue v2.6.11 进行验证。
使用 Scoped 部件插槽
要创建范围组件<slot>,您首先需要从您的孩子组件中将属性转移到命名或未命名的插槽中。
以下是包含未命名和命名<slot>元素的ChildComponent的示例:
1[label ChildComponent.vue]
2<template>
3 <div>
4 <p>This is a child component.</p>
5 <div>
6 <p>Default Slot</p>
7 <slot v-bind:text="defaultSlotText"></slot>
8 </div>
9 <div>
10 <p>Named Slot</p>
11 <slot name="namedSlot" v-bind:text="namedSlotText"></slot>
12 </div>
13 </div>
14</template>
15
16<script>
17export default {
18 data() {
19 return {
20 defaultSlotText: "Default Slot Text",
21 namedSlotText: "Named Slot Text"
22 }
23 }
24}
25</script>
然后,要在母组件的v-slot内容中使用这些属性,创建一个与子组件的<slot>元素绑定的<template>元素。
将属性添加到<模板>元素,并将其设置为您想要访问范围属性的名称,这基本上为该模板中的任何内容创建了一个本地变量,允许您访问它,就好像它在主范围内。
例如,在firstScope中,转移到<slot>的属性将被访问为{{firstScope.exampleProperty}},而secondScope将被访问为{{secondScope.exampleProperty}}。
以下是引用DefaultSlotText和namedSlotText的ParentComponent的示例:
1[label ParentComponent.vue]
2<template>
3 <div>
4 <p>This is a parent component.</p>
5 <ChildComponent>
6 <template v-slot="defaultSlotText">
7 <p>{{defaultSlotText.text}}</p>
8 </template>
9 <template v-slot:namedSlot="namedSlotText">
10 <p>{{namedSlotText.text}}</p>
11 </template>
12 </ChildComponent>
13 </div>
14</template>
15
16<script>
17import ChildComponent from './ChildComponent.vue';
18
19export default {
20 components: {
21 ChildComponent
22 }
23}
24</script>
在 Web 浏览器中查看应用程序会产生以下结果:
1[secondary_label Output]
2<div>
3 <p>This is a parent component.</p>
4 <div>
5 <p>This is a child component.</p>
6 <div>
7 <p>Default Slot</p>
8 <p>Default Slot Text</p>
9 </div>
10 <div>
11 <p>Named Slot</p>
12 <p>Named Slot Text</p>
13 </div>
14 </div>
15</div>
DefaultSlotText.text和namedSlotText.text从儿童组件传递到家长组件中。
结论
在本教程中,您探讨了一项示例Vue项目,其中包含一个家长组件和一个孩子组件,该组件与分布式插槽共享属性。
如果您想了解有关 Vue.js 的更多信息,请参阅 我们的 Vue.js 主题页面以获取练习和编程项目。