小程序中在插槽里使用默认结构

插槽中可以写默认结构,如果没有替换标签,就显示这里的默认结构
可以使用::empty

:empty是一个css的[伪类选择器],用于选择页面中为空的元素

在组件里wxml里写

<view class="chacao">
     //插槽
     <slot name="ff"></slot>
</view>
//默认插槽
<view class="moren">
    <text>小飞棍来咯</text>
</view>

组件的wxss

.moren{
  display: none;
}

.chacao:empty + .moren{
  display: block;
}

在父级wxml页面里使用插槽

//如果不使用插槽就显示的默认插槽,使用了插槽就不显示默认插槽
 <view slot="ff">
    替换默认插槽
  </view>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容