uni-app 微信小程序 this.$slots.default 返回 true/false 并不是一个 node 节点

sinazl 1楼•13 天前

小程序端不支持操作$slots，仅支持判断该slot是否存在。

yuanlaile 2楼•13 天前作者

是小程序端的问题，还是uniapp的问题？

h691938207 3楼•13 天前

回复 4***@qq.com: 在小程序端为了性能考虑，没有 vnode，故不支持。

ionicwang 4楼•13 天前

回复 YUANRJ: 小程序端好像也不能判断slot是否存在，无论我外部

还是

，组件里$slots都是{default: true}，不能判断具体是插槽aaa还是bbb。如果外部不传插槽，$slots为{}

sinazl 5楼•13 天前

回复 1***@qq.com: 你的写法不对，参考文档

sinazl 6楼•13 天前

在 uni-app 中，this.$slots.default 用于获取插槽内容。在微信小程序中，this.$slots.default 返回的内容并不是一个标准的节点（如 Vue 中的 VNode），而是一个数组或 undefined，具体取决于是否有默认插槽内容。

1. 插槽有内容时

如果组件有默认插槽内容，this.$slots.default 返回的是一个数组，数组中的每个元素代表一个节点。例如：

this.$slots.default // 返回 [node1, node2, ...]

2. 插槽无内容时

如果组件没有默认插槽内容，this.$slots.default 返回 undefined。

判断插槽是否有内容

为了判断插槽是否有内容，可以使用以下方法：

if (this.$slots.default && this.$slots.default.length > 0) {
  // 插槽有内容
} else {
  // 插槽无内容
}

示例

以下是一个简单的示例，展示如何在 uni-app 中判断默认插槽是否有内容：

<template>
  <view>
    <slot></slot>
    <view v-if="hasSlotContent">插槽有内容</view>
    <view v-else>插槽无内容</view>
  </view>
</template>

<script>
export default {
  computed: {
    hasSlotContent() {
      return this.$slots.default && this.$slots.default.length > 0;
    }
  }
}
</script>