码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-06-27 09:40:37      阅读:129      评论:0      收藏:0      [点我收藏+]

标签:点击   第一个   HCL   title   div   事件   列表   log   cli   

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

需要使用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]
      }, {})
    }
  }
})

 

技术图片

 

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

标签:点击   第一个   HCL   title   div   事件   列表   log   cli   

原文地址:https://www.cnblogs.com/theblogs/p/13197009.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!