Vue slot使用总结

Vue.jsslot的意为“插槽”,我的理解是它为其他构件提供一个盛放它们的容器,用到的构件直接往这个容器里面放。非常的高内聚、低耦合,说人话就是,构件的样式、属性都是内部的,插槽定义的只是这个容器的样式和属性,构件的修改不会影响到外部的插槽,真的很模块化。

组件

插槽的使用是在组件的基础上的,我们先定义一个简单的组件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// component.vue
<template>
<div class="card">
<h2 class="title">标题</h2>
<div class="content">
这是内容
</div>
<div class="footer">
<button class="cancel">取消</button>
<button class="confirm">确认</button>
</div>
</div>
</template>

// app.vue
<template>
<div id="app">
<card></card>
</div>
</template>

渲染出来的效果:

流程图:

graph TD;
	A-->B;
	A-->D;
	B-->C;

时序图:

sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!

状态图:


插槽

插槽需要在组件中使用slot标签定义:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// component.vue
<template>
<div class="card">
// ...
<div class="content">
<slot></slot>
</div>
// ...
</div>
</template>

// app.vue
<div id="app">
<card>这是slot内容</card>
</div>

使用的时候直接将内容放在组件的标签内,就当是一个普通的html标签,渲染时就会替换掉组件的<slot>部分:

<slot></slot>标签内也可以放入内容,作用是作为默认内容,比如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// component.vue
<template>
<div class="card">
<h2 class="title">标题</h2>
<div class="content">
<slot>这是默认内容</slot>
</div>
<div class="footer">
<button class="cancel">取消</button>
<button class="confirm">确认</button>
</div>
</div>
</template>

// app.vue
<template>
<div id="app">
<card></card>
</div>
</template>

具名插槽

就是有名字的插槽,作用时当组件中有多个插槽时便于区分,如果没有指定名称,默认就是default,父子组件中分别这么写:

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
// component.vue
<template>
<div class="card">
<h2 class="title">标题</h2>
<div class="content">
<slot></slot>
<div class="detail">
<slot name="detail"></slot>
</div>
</div>
<div class="footer">
<button class="cancel">取消</button>
<button class="confirm">确认</button>
</div>
</div>
</template>

// app.vue
<template>
<div id="app">
<card>
这是slot内容
<template v-slot:detail>
<p>这是详细内容</p>
</template>
</card>
</div>
</template>

渲染后:

可以看到,根据不同的插槽名称渲染进去,没指定名称就被渲染到default里面,

使用可以使代码更加独立和低耦合,