this.triggerEvent获取自定义组件中的状态

Posted 2020-12-13 theblogs

小程序在使用自定义组件中， 在当前页面想要获取组件中的某一状态

需要使用this.triggerEvent(‘‘, {}, {})

第一个参数自定义事件名称
第二个参数是传过去的参数
第三个参数不可以省略，对象形式

栗子：

//首页index.js使用自定义组件
<w-tab-control titles="{{titles}}" bind:boshClick="tabControl"/>

//w-tab-control自定义组件
<view class=‘tab-control‘>
  <block wx:for="{{titles}}" wx:key="index">
    <view 
      class="tab-item {{index == currentIndex ? ‘active‘ : ‘‘}}"
      bind:tap="itemClick"
      data-index="{{index}}">
        <text>{{item}}</text>
      </view>
  </block>
</view>

//w-tab-control.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    titles: {
      type: Array,
      value: []
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    currentIndex: 0
  },
  methods: {
    itemClick(e) {
      //获取index索引值，赋给当前的选项，通知页面内部点击事件
      var index = e.currentTarget.dataset.index;
      console.log(index, ‘====‘);
      this.setData({
        currentIndex: index
      })
      /*
      获取组件中的某一状态使用this.triggerEvent(‘‘, {}, {})
      第一个参数自定义事件名称
      第二个参数是传过去的参数
      第三个参数不可以省略，对象形式
      */
      this.triggerEvent(‘boshClick‘, {
        index,
        titles: this.properties.titles[index]
      }, {})
    }
  }
})