微信小程序动态的数据切换之slot标签

本文主要是介绍微信小程序动态的数据切换之slot标签，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

<!--在我们的这个位置的话就是编辑我们的相关的文件  -->

<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 -->
      {{item.name}}
    </view>
  </view>
  <!-- 在我们的这个位置的话就是添加我们的内容 -->
  <view class="tabs_contents">
    <!-- todo 
      我们的slot标签：和我们的block一样本质上是一个占位符
      等到 父组件调用子组件的时候 再传递 标签过来 最终 这些被传递的
      标签就会替换为slot插槽的位置
     -->
     <slot></slot>
  </view>
</view>

父类的wxml的数据的内容在我们的父类中调用我们的子类的数据

<!-- 子组件向父组件传递数据是通过事件的方式进行传递的 
   1： 在子组件的标签上加入一个自定义事件
-->
<Tabs tabs="{{tabs}}" binditemChange="handleItemChange">
  <!-- 在我们的这个位置的话就是使用我们的slot标签作为我们的占位符 -->
  <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>

这篇关于微信小程序动态的数据切换之slot标签的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！