小程序组件之间传值方式 ---- 自定义组件实现一个切换菜单

1、制作一个组件的菜单切换，并在父组件上引入，子组件的代码如下：

<!-- Tabs.wxml -->
<view class="Tabs_switch">
    <view class="Tabs_title">
        <view class="Tabs_modules {{item.isActive ? 'active' : ''}}"
         wx:for="{{Tabs}}"
          wx:key="id" 
          bindtap="handleItemTaP" 
          data-index="{{index}}">
            {{item.name}}
        </view>
    </view>
    <view class="Tabs_content">
      <!-- 留一个插槽的位置 -->
      <slot></slot>
    </view>
</view>

　　

/* Tabs.wxss */
.Tabs_switch .Tabs_title {
  display: flex;
}
.Tabs_switch .Tabs_title .Tabs_modules {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20rpx 0;
}
.Tabs_switch .Tabs_title .active {
  border-bottom: 5rpx solid #eb4450;
  color: #eb4450;
}

　　

// Tabs.js 
Component({
  /**
   * 组件的属性列表
   */
  // 从父组件接收的data 会自动同步到 子组件的data 对象里面
  properties: {
      Tabs:{
        type:Array,
        value:[]
      }
  },

  /**
   * 组件的初始数据
   */
  data: {
  },

  /**
   * 组件的方法列表
   */
  methods: {
    handleItemTaP(e){
        const index = e.target.dataset;
　　　   //triggerEvent方法用法类似于Vue中的emit()
        this.triggerEvent('myevent',index)
    }
  }
})

　　

   2、父组件（index）需要在index.json引入Tabs组件，代码如下：

{
  "usingComponents": {
     "Tabs":"../../components/Tabs/Tabs"
  }
}

　3、index.wxml代码如下：

 <Tabs Tabs="{{cateData}}" bindmyevent="handlemyevent">
   <block wx:if="{{cateData[0].isActive}}">0</block>
   <block wx:elif="{{cateData[1].isActive}}">1</block>
   <block wx:elif="{{cateData[2].isActive}}">2</block>
  </Tabs>

　4、index.js代码如下：

Page({
  /**
   * 页面的初始数据
   */
  data: {
    cateData: [{
        id: 0,
        name: '综合',
        isActive: true
      },
      {
        id: 1,
        name: '销量',
        isActive: false
      },
      {
        id: 2,
        name: '价格',
        isActive: false
      }
    ]
  },

  handlemyevent(e) {
    let { index } = e.detail;
    console.log(index)
    var tabs = this.data.cateData;
    tabs.forEach((item, v) => {
      if (item.id === index) {
        tabs[v].isActive = true;
      } else {
        tabs[v].isActive = false;
      }
    });
    this.setData({
      cateData: tabs
    });

  }

})

   5、最终我们可以得到以下菜单栏切换的效果，随着菜单栏的切换对应的内容也发生改变。