Vue.js核心技术解析与uni-app跨平台实战开发学习笔记 第7章 Vue.js高级进阶 7.8 slot插槽

Vue.js核心技术解析与uni-app跨平台实战开发学习笔记

第7章 Vue.js高级进阶

7.8 slot插槽

slot插槽：用于组件之间传值。

举个栗子：

创建一个新组件myslot，在HelloWorld组件中引用myslot组件，把HelloWorld组件中的数据传递给myslot组件。

7.8.1 使用传统方式【父组件向子组件传值】实现

HelloWorld.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

myslot.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

运行效果

7.8.2 使用slot插槽形式进行父子组件传值

运行效果

可以看出：

• 使用slot插槽，只需要在引用组件时，把要传递的数据使用插值表达式直接放到组件标签中经
• 在子组件中使用标签接收数据

7.8.3 具名插槽：多数据传递

运行效果：

在子组件接收给slot添加name属性，name的属性值就是父组件中元素的slot属性值。