vue3判断插槽内容是否为空

介绍

  • 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 注释 <!-- comment -->

代码实现

当我们需要用到判断插槽内容是否为空这个条件去其他场景使用时,我们并不能像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;
});
相关推荐
musk12129 分钟前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
万少1 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL1 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl021 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang2 小时前
前端如何实现电子签名
前端·javascript·html5
今天又在摸鱼2 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿2 小时前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再2 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling5552 小时前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
拾光拾趣录2 小时前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css