微信小程序 slot与block

微信小程序 slot与block

 

slot与block的关系：<slot></slot>这个标签 其实就是一个占位符 插槽，等到父组件调用子组件的时候 在传递 标签过来 最终 这些被传递过来的标签 就会 替换 slot 插槽的位置

实例：

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.value}}
   </view>
   </view>
   <view class="tabs_content">
     <slot></slot>
   </view>
 </view>

pages\goods_list\index.wxml 文件：

 <SearchInput></SearchInput>
 <!-- 监听自定义事件 -->
 <Tabs tabs="{{tabs}}" bindtabsItemChange="handleTabsItemChange" >
   
   <block wx:if="{{tabs[0].isActive}}">
     <view class="first_tab">
         <navigator class="goods_item"
         wx:for="{{goodsList}}"
         wx:key="goods_id"
         url="/pages/goods_detail/index?goods_id={{item.goods_id}}"
         >
             <!-- 左侧 图片容器 -->
             <view class="goods_img_wrap">
               <image mode="widthFix" src="{{item.goods_small_logo?item.goods_small_logo:'https://ww1.sinaimg.cn/large/007rAy9hgy1g24by9t530j30i20i2glm.jpg'}}"></image>
             </view>
             <!-- 右侧 商品容器 -->
             <view class="goods_info_wrap">
               <view class="goods_name">{{item.goods_name}}</view>
               <view class="goods_price">￥{{item.goods_price}}</view>
             </view>
           </navigator>
     </view>
   </block>
   <block wx:elif="{{tabs[1].isActive}}">1</block>
   <block wx:elif="{{tabs[2].isActive}}">2</block>
 ​
 </Tabs>

素材来源：黑马程序员微信小程序开发前端教程零基础玩转微信小程序哔哩哔哩_bilibili

参考资料：【微信小程序---自定义组件slot标签】studyer网的博客-CSDN博客微信小程序slot标签