vue3判断插槽内容是否为空

介绍

• MyCom.vue

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

• 组件使用

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

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

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

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

Symbol(v-fgt)

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

Symbol(v-cmt)

• 表示 注释节点 (Comment Node)
• 对应模板中的 HTML 注释 <!-- comment -->

代码实现

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

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

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;
});