微信小程序——slot插槽不能显示默认内容？

背景

在小程序中封装组件并使用插槽时，遇到了一个问题：没有像vue那样展示出来插槽中的默认内容。即使在组件代码中的插槽内添加默认内容，页面上也无法正确展示。

搜索后发现是小程序不支持"默认插槽"功能，并且他也没打算改，已经过去很多年了

既然如此，那么我们如何结合小程序插槽来实现一个类似于vue"默认插槽"的功能呢？

解决

最简单的方法当然是利用一个布尔类型的变量，通过 wx:if 和 wx:else 来控制是显示插槽的内容还是显示组件内部的默认值。但显然，这种方式并不优雅，不符合我们大多数人的期望。

实际上，我们可以采用更优雅的方式来解决这个问题，通过利用 CSS 的一些特性。

我们可以使用 ::empty 伪类来实现这一目标。通过为插槽元素应用样式，我们可以控制当插槽为空时显示默认内容，从而达到类似"默认插槽"的效果。

代码

html 复制代码

// nav-bar.wxml
<view style="height:{{navigationHei}}px; top:{{navigationTop}}px; padding-left:{{paddingLeft}}px" class="nav-bar">
  <view class="nav-bar-left">
    <view class="left">
      <slot name="left"> </slot>
    </view>
    <view class="default_left"> 
      <text>我是默认left</text>
    </view>
  </view> 
  <view class="nav-bar-content">{{title}}</view>
</view>

css 复制代码

.nav-bar{
  position: fixed;
  width:100vw;
  left:0;
  top:0;
  background: orange;
  box-sizing: border-box;
}
.nav-bar-left{
  display: flex;
  height: 100%;
  align-items: center;
}

.nav-bar-content{
  position: absolute;
  left:0;
  top:0;
  width:100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}


// 默认插槽是否显示 如果默认插槽组件内是空的，也就是没有传组件，此时<slot/> 
// 标签在渲染的时候，会消失，则slot标签的父容器此时为空
.nav-bar-left:empty + .nav-bar-default_left {
  display: flex;
}
.nav-bar-default_left {
  display: none;
}

效果

默认不传参：

html 复制代码

<nav-bar/>

若给插槽传值，则会显示我们传入的值：

html 复制代码

// 某页面
<nav-bar title="传个标题">
  <view slot="left">
    传个左上角
  </view>
</nav-bar>

结束

由此，我们便在小程序中实现了类似于vue的"默认插槽"功能~

微信小程序——slot插槽不能显示默认内容？

背景

解决

代码

nav-bar.wxml

nav-bar.wxss

效果

结束