微信小程序 this.triggerEvent()的具体使用
更新时间：2019年12月10日 15:32:40 作者：給我小鱼干
这篇文章主要介绍了微信小程序 this.triggerEvent()的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
在对组件进行封装时 在当前页面想要获取组件中的某一状态，需要使用到this.triggerEvent(' ',{},{}),第一个参数是自定义事件名称，这个名称是在页面调用组件时bind的名称，第二个对象就可以将想要的属性拿到，第三个参数文档中有介绍，有机会再做补充。
在这个demo中like组件是我要封装的组件，在classic.wxml中调用的：
组件like.vue的页面是这样写的：
<view bind:tap="onLike" class="container">
<image src="{{like?yesSrc:noSrc}}" />
<text>{{count}}</text>
</view>
组件的like.js中methods是这样写的：
methods: {
onLike(event) {
let like = this.properties.like;
let count = this.properties.count;
count = like ? count - 1 : count + 1;
this.setData({
like: !like,
count
})
let behavior = this.properties.like ? "like" : "cancel";
this.triggerEvent('like', {
behavior
}, {})
}
}
那么在classic.wxml中调用组件：
这里要注意bind:后面的like是this.triggerEvent()的第一个参数，自定义事件名称
<v-like bind:like="onLike" like="{{classicData.like_status}}" count="{{classicData.fav_nums}}"/>
classic.js中onlike就可以实现页面对组件属性的获取：
onLike: function(event) {
console.log(event)
}
event.detail.behavior就可以拿到是不是喜欢的属性了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
做web开发几年，也认为自己的js写了不少，可真正去解释这个东西的时候，才发现不是这么简单，花了一些时间，写了几个小demo，让我们来一探究竟。2011-04-04
本文通过html代码和js代码给大家介绍了实现倒计时天,时,分,秒功能，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2018-07-07
今天小编就为大家分享一篇layui select 禁止点击的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
网页截图是指将网页上的内容截取下来,并保存为图片的过程,下面这篇文章主要给大家介绍了关于JavaScript实现页面截图的3种解决方案,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-06-06
做web开发的朋友都清楚，js程序的调试是相当郁闷的，因为首先这种语言语法比较灵活，它是一种弱类型的脚本语言，很多错误是无法控制的。2010-10-10
这篇文章主要介绍了轻松解决JavaScript定时器越走越快的问题 ,本文通过实例带给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-05-05
这篇文章主要为大家详细介绍了js实现弹幕墙效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
这篇文章主要介绍了JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
在 javascript 中，可以使用 == 来比较两个数据是否相等，如果两个数据的类型不同，那么，将在进行转换后进行比较2010-04-04
这篇文章主要介绍了使用javascript做的一个随机点名程序，经测试，效果相当不错,需要的朋友可以参考下2014-02-02
最新评论