收藏
回答

自定义组件使用多个slot时,判断某个slot不存在的方法

框架类型 问题类型 终端类型 微信版本 基础库版本
小程序 需求 工具 6.5.3 2.6.1

- 需求的场景描述(希望解决的问题)

<!--组件 comp-a 模板内的代码-->

<view class="wrapper">
  <slot name="before"></slot>
  <view>这里是组件的内部细节</view>

 <!--<view wx:if={{此处判断slot.after是否存在,不存在则不生成此节点 }} class="after-class">-->

  <view wx:if={{!!slot.after}} class="after-class">

    <checkbox value="{{item.name}}" checked="{{item.checked}}" />

    <slot name="after"></slot>

  </view>

</view>

<!--引用组件的页面代码-->

<view>
  <comp-a>
    <!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
    <view slot="before">这里是插入到组件before slot中的内容</view>

 </comp-a>

</view>

<!--页面中并没有使用 slot=“after”的内容,期望comp-a生成后的节点不包含  <view class="after-class"/>这个节点及其子内容  -->


- 希望提供的能力

    在自定义组件中使用了多了 slot,希望能提供slot集合引用,用于判断某个slot是否存在,如果不存在则不生成部分视图(例如上面的:.after-class 视图)


最后一次编辑于  2019-03-04
回答关注问题邀请回答
收藏

2 个回答

  • LastLeaf
    LastLeaf
    2019-03-04

    你好,没有特别明白你的需求。请问是希望 slot 没有内容的时候提供默认内容吗?

    2019-03-04
    有用
    回复 5
    • 2019-03-04

      首先: wx:if = {{true}} 时对应的view才会显示对吧?

      其次: 当存在多个slot时,需要在wx:if = {{}} 里面能 判断是否存在某个slot,存在则显示对应的 view。

      2019-03-04
      回复
    • 2019-03-04回复

      上面给的代码是放在 component 自定义组件里面的代码 。

      2019-03-04
      回复
    • LastLeaf
      LastLeaf
      2019-03-04回复

      明白了。我们考虑一下。

      2019-03-04
      回复
    • nil
      nil
      2019-10-25
      希望提供slots查询
      2019-10-25
      回复
    • 谢
      2022-05-30回复LastLeaf
      2022了还是没有
      2022-05-30
      回复
  • 嘿嘿嘿
    嘿嘿嘿
    2020-06-09

    视觉上可以用css3去控制,但是不会触发组件的生命周期


    <view class="has-next-box has-next-customer">
    
    <slot></slot>
    
    </view>
    
    <view class="has-next-box has-next-default">
    
    没有更多数据
    
    </view>
    
    
    .has-next-customer {
     
     display: none;
    }
    
    
    .has-next-customer:not(:empty) {
      display: block;
    }
    
    
    .has-next-customer:not(:empty)+.has-next-default {
      display: none;
    }
    
    2020-06-09
    有用
    回复
登录 后发表内容