实现功能:
子组件页面显示components/Tabs/Tabs.wxml
// components/Tabs/Tabs.wxml
<view class="tabs">
<view class="tabs_title">
<view
wx:for="{{tabs}}"
wx:key="id"
class="title_item {{item.isActive?'active':''}}" bindtap="handleItemTap"
data-index="{{index}}">
{{item.name}}
</view>
</view>
<view class="tabs_content">
<slot></slot>
</view>
</view>
<slot></slot>这个标签 其实就是一个占位符 插槽,等到父组件调用子组件的时候 在传递 标签过来 最终 这些被传递过来的标签 就会 替换 slot 插槽的位置
父组件页面显示pages/demo-component/demo-component.wxml
// pages/demo-component/demo-component.wxml
<Tabs tabs="{{tabs}}" binditemChange="handleItemChange">
<block wx:if="{{tabs[0].isActive}}">卧室标题首页下面的内容</block>
<block wx:elif="{{tabs[1].isActive}}">卧室标题原创下面的内容</block>
<block wx:elif="{{tabs[2].isActive}}">卧室标题分类下面的内容</block>
<block wx:else="{{tabs[3].isActive}}">卧室标题关于下面的内容</block>
</Tabs>