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;
});
相关推荐
灵感__idea5 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴6 小时前
Mix
前端·webgl
代码续发6 小时前
前端组件梳理
前端
试图让你心动7 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码7 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记7 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏7 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数8 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante8 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam9 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript