vue3 获取插槽节点
时间: 2023-08-08 13:00:42 浏览: 61
在 Vue 3 中,我们可以使用`$slots`属性来获取插槽节点。
首先,在模板中定义一个插槽,在组件中使用`v-slot`指令来具名插槽,例如:
```html
<template>
<div>
<slot name="header"></slot>
<slot></slot>
</div>
</template>
```
然后,在组件中使用`$slots`属性来获取插槽节点,可以通过`$slots.default`获取默认插槽的节点,通过`$slots.<name>`获取具名插槽的节点,例如:
```js
export default {
name: 'MyComponent',
mounted() {
const headerSlotNodes = this.$slots.header;
const defaultSlotNodes = this.$slots.default;
console.log('Header Slot Nodes:', headerSlotNodes);
console.log('Default Slot Nodes:', defaultSlotNodes);
}
}
```
这样,我们就可以获取到插槽节点,并进行后续的操作,比如渲染和处理。
需要注意的是,在 Vue 3 中,`$slots`是一个对象而不是数组,并且默认插槽是使用特殊的`default`键名来访问的。如果插槽为空,则`$slots.<name>`将返回一个空数组。如果想要获取插槽的第一个节点,可以通过`$slots.<name>[0]`来获取。
总的来说,在 Vue 3 中获取插槽节点非常简单,只需要使用`$slots`属性并提供插槽的名称即可。