vue3 插槽如何使用
时间: 2023-11-16 17:56:55 浏览: 46
Vue 3 中的插槽使用方式与 Vue 2 有一些不同。在 Vue 3 中,插槽被称为 `slots`,使用 `<slot>` 标签来定义和使用。
首先,在父组件中,你可以在组件的模板中使用 `<slot>` 标签来定义插槽,并且可以给插槽命名。例如:
```html
<template>
<div>
<slot name="header"></slot>
<slot></slot>
<slot name="footer"></slot>
</div>
</template>
```
在子组件中,你可以通过 `<template v-slot:slotName>` 或者简化的语法 `#slotName` 来使用插槽。例如:
```html
<template>
<div>
<slot name="header">
<!-- 默认内容 -->
<h1>Default Header</h1>
</slot>
<!-- 其他内容 -->
<slot></slot>
<!-- 其他内容 -->
<slot name="footer">
<!-- 默认内容 -->
<p>Default Footer</p>
</slot>
</div>
</template>
```
然后,在父组件中,你可以通过传递内容到插槽中来使用它们。例如:
```html
<template>
<my-component>
<template v-slot:header>
<h1>Custom Header</h1>
</template>
<p>Content goes here</p>
<template v-slot:footer>
<p>Custom Footer</p>
</template>
</my-component>
</template>
```
在这个例子中,父组件通过使用 `<template v-slot:slotName>` 来指定要传递给插槽的内容。
这就是 Vue 3 中插槽的基本用法。希望能够帮到你!如果还有其他问题,请随时提问。