frontend

Vue slot使用总结

Vue.js中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">
            这是内容
        </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里面，


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