Vue-插槽

# 插槽

插槽（slot）是一种将内容分发到组件内部特定位置的机制。通俗地说，就是在组件中预留一些位置，然后在组件的使用者中填充内容。

一个组件可以包含多个插槽，并且每个插槽可以有默认内容。组件的使用者可以通过在组件标签中使用特定的属性来向插槽中填充内容。

# 写法一

# 父组件

// App.vue
<Demo>
	<span>哈哈哈</span>
</Demo>

1
2
3
4

# 子组件

// Demo.xue
<template>
	<div>
        <h2>
            我的Demo组件
        </h2>
        <slot></slot>
    </div>
</template>

1
2
3
4
5
6
7
8
9

# 写法二

# 父组件

// App.vue
<Demo>
	<span>哈哈哈</span>
    <template slot="test1">
        <span>尚硅谷1</span>
    </template>
        <template slot="test2">
        <span>尚硅谷2</span>
    </template>
</Demo>

1
2
3
4
5
6
7
8
9
10

# 子组件

// Demo.xue
<template>
	<div>
        <h2>
            我的Demo组件
        </h2>
		<slot></slot>
    </div>
</template>

1
2
3
4
5
6
7
8
9

上次更新: 2024/08/14, 04:14:33

← Vue-组件传递 package-lock.json→