微信小程式 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標籤