小程序如何实现像Vue一样的默认插槽

一、存在现象

• 虽然在小程序中可以使用slot插槽，但远没有Vue中的slot插槽好用，就是没有提供默认值，举个例子如下：

• 实现一个area-header组件

<view class="header">
  <view class="title">{{title}}</view>
  <view class="right">
    <view class="slot">
      <slot>
        <view class="default">
          <text>{{rightText}}</text>
          <image class="icon" src="/assets/images/icons/arrow-right.png"></image>
        </view>
      </slot>
    </view>
  </view>
</view>

properties: {
    title: {
      type: String,
      value: "默认标题",
    },
    rightText: {
      type: String,
      value: "更多",
    }
  },

• 使用组件

<view class="recommend-song">
  <area-header title="推荐歌曲">
    <text>阿清</text>
  </area-header>
</view>

• 在上述代码运行之后，效果如下图所示，这是正常的效果

• 但是将<text>阿清</text>去除后，并没有出现默认插槽的效果，也就是没有显示更多

• 不符合预期效果：

• 符合预期的效果：

实现

方式一：使用JS

• 比较容易想到使用wx:if进行是否显示组件右边的判断，但这种方式也比之方式二css的会复杂一点，因为需要绑定isShowMore

<view class="header">
  <view class="title">{{title}}</view>
  <view class="right">
    <view class="slot">
      <slot></slot>
    </view>
    <view class="default" wx:if="{{isShowMore}}">
      <text>{{rightText}}</text>
      <image class="icon" src="/assets/images/icons/arrow-right.png"></image>
    </view>
  </view>
</view>

properties: {
    title: {
      type: String,
      value: "默认标题",
    },
    rightText: {
      type: String,
      value: "更多",
    },
    isShoeMore: {
      type: Boolean,
      value: true,
    },
  },

<view class="recommend-song">
  <area-header title="推荐歌曲" isShowMore="{{false}}">
    <text>阿清</text>
  </area-header>
</view>

<view class="recommend-song">
  <area-header title="推荐歌曲">
  </area-header>
</view>

方式二：使用CSS

• 使用css解决这个问题，需要使用到伪类empty
• 这是MDN上的解释：:empty CSS 伪类用于选择不包含任何子元素的元素。子元素可以是元素节点或文本（包括空格）。但是注释、处理指令和 CSS content 不会影响元素是否被认定为空。
• 它会判断子元素是否为空，为空时，该css语句就生效；子元素就是class为slot的子元素
• 不为空时，就将default中的内容进行隐藏display:none

<view class="header">
  <view class="title">{{title}}</view>
  <view class="right">
    <view class="slot">
      <slot></slot>
    </view>
    <view class="default" wx:if="{{isShoeMore}}">
      <text>{{rightText}}</text>
      <image class="icon" src="/assets/images/icons/arrow-right.png"></image>
    </view>
  </view>
</view>

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 88rpx;
}

.header .title {
  font-size: 36rpx;
  font-weight: 700;
}

.header .slot:empty + .default {
  display: flex;
}

.header .default {
  display: none;
  align-items: center;
  font-size: 28rpx;
  color: #777;
}

.header .default .icon {
  width: 50rpx;
  height: 50rpx;
}

• 我觉得这个css方法呢，会比js的方法更不容易想到，但是会比js的方法使用起来更简单，毕竟不用再使用wx:if进行传值进行判断是否显示与隐藏