vue3判断插槽内容是否为空

wzyoung2025-06-02 16:32

介绍

MyCom.vue

vue 复制代码

<div>
    <slot>默认内容</slot>
</div>

组件使用

js 复制代码

<MyCom>
    <!-- comment -->
    <div v-for="item in list"/>
</MyCom>

我们尝试在MyCom组件内打印slots.default()数组，即使list长度为0，依然会打印长度为2的数组:

bash 复制代码

[{..., type: Symbol(v-cmt)}, {..., type: Symbol(v-fgt)}]

结果大概是这样的（其他字段省略，这里只讲type字段的值）。

`Symbol(v-fgt)`

表示片段节点 (Fragment Node)
对应 Vue 模板中的 <template> 标签（当它用作包裹多个元素时）

`Symbol(v-cmt)`

表示注释节点 (Comment Node)
对应模板中的 HTML 注释

代码实现

当我们需要用到判断插槽内容是否为空这个条件去其他场景使用时，我们并不能像vue2一样，只通过判断slots.default().length就能知道插槽内容是否为空。

我们需要过滤掉注释节点、空的片段节点，再判断其长度即可

js 复制代码

const slots = useSlots();
const isEmpty = computed(() => {
  if (!slots.default) return true;
  const slotsFilter = slots.default().filter((vnode) => {
    return (
      vnode.type !== Symbol.for("v-cmt") &&
      vnode.type === Symbol.for("v-fgt") &&
      !!vnode.children.length
    );
  });
  return slotsFilter.length === 0;
});