Vue插槽(slot)用法

为什么要用插槽(slot)?

为了保证组件内容的灵活性,组件的内容应该由其所在的上下文环境确定,同时应该将组件必要的内部层级透明地展现在组件所在的上下文环境中

插槽的通俗解释

Slot可以理解为占坑,即在组件模板中占好了位置,当使用该组件标签时候,组件标签里面的内容就会自动填坑(替换组件模板中slot位置)。

插槽的用法

匿名插槽

子组件home.vue

1
2
3
<test>
Hello Word
</test>

父组件test.vue

1
2
3
<a href="#">
<slot></slot>
</a>

当组件渲染的时候,<slot></slot>会被替换为Hello Word。

当然插槽内也可以包含任何模板代码,包括HTML。

具名插槽

有时候我们一个组件里需要多个插槽,对于这样的情况,<slot>元素有一个特殊的特性:name ,这个特性可以用来定义额外的插槽。

子组件base-layout.vue

1
2
3
4
5
6
7
8
9
10
11
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>

在向具名插槽提供内容的时候,我们可以在<template>元素上使用slot指令,并以参数的形式提供其名称:

父组件:

1
2
3
4
5
6
7
8
9
10
11
12
<base-layout>
<template slot="header">
<h1>Here might be a page title</h1>
</template>

<p>A paragraph for the main content.</p>
<p>And another one.</p>

<template slot="footer">
<p>Here's some contact info</p>
</template>
</base-layout>

任何没有被包裹在带有slot的<template>中的内容都会被视为默认插槽的内容。当然我们也可以这样写:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<base-layout>
<template slot="header">
<h1>Here might be a page title</h1>
</template>

<template slot="default">
<p>A paragraph for the main content.</p>
<p>And another one.</p>
</template>

<template slot="footer">
<p>Here's some contact info</p>
</template>
</base-layout>

参考


----------- 本文结束啦感谢您阅读 -----------

赞赏一杯咖啡

欢迎关注我的其它发布渠道