自定义组件如何判断slot是否存在
发布于 7 年前 作者 nalong 16935 次浏览 来自 问答

在小程序的组件中定义如下：

<view>
<slot name="a"></slot>
<slot name="b"></slot>
</view>

使用时

<component-test>
<view slot="b">test</view>
</component-test>

该怎么判断slot a是否存在呢？（不存在的元素做隐藏）

9 回复

是的

查了一下，并没有相关的 api。

业务情况是需要先根据是否提供了 slot 再决定如何渲染。

刚刚发现可以用 :empty 伪类来找到这个节点，然后把节点给隐藏起来

支付宝小程序上可以这么做 微信上失效了

<view a:if="{{$slots.$default}}" class=“am-input-label {{labelCls}}”>

<slot />

</view>

 虽然没实现过，不过现在已经有相关的api了

我们考虑一下添加这个特性。

不过，限于小程序的架构，即使添加这个特性，接口只能做成异步的（类似于 wx.createSelectorQuery）。

类似vue会提供this.$slots[‘name’]用于判断。

功能场景就是上面我写的，实现一个多slot组件，当复杂度较高时可以通过判断slot是否存在来控制组件展示样式

你好，目前没有相关特性支持。可否描述一下你的使用场景呢？我们会考虑添加这个特性。

确认一下，你的需求是，component-test 组件需要能够判断自己的某个 slot 中是否实际存在节点？

回到顶部