微信小程序 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就可以拿到是不是喜欢的属性了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
大家在日常生活中都有网购的经验，有的网站会有商品放大镜功能，效果非常棒，那么基于js代码是如何实现的呢？下面小编给大家带来了基于js实现购物网站商品放大镜效果，非常不错，感兴趣的朋友参考下吧2016-09-09
众所周知，我们web开发人员痛恨IE浏览器，因为IE不支持标准，标准外的默认行为又和其他浏览器经常不一致，所以我们在做项目的时候，经常需要专门针对IE来做些文章，当然对于referer也不例外，今天我们就来看下如何让referer兼容主流浏览器2014-11-11
传统上，网页中不会有大量的脚本，至少脚本很少会影响网页的性能。2010-03-03
这篇文章主要介绍了js如何给json对象添加、删除、修改属性问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
JS电话号码验证是比较常的一种验证，下边给出一个JavaScript验证电话号码的小例子。国内固定电话都是七位或8位的数字组成的，还可以带有长途的区号。2015-09-09
对于html中的一些元素注册事件的方式有多种，接下来将为大家详细介绍下，大家可以测试并对比下根据自己的习惯使用哪一种方式2013-03-03
TypeScript是一种由微软开发的自由开源的编程语言,主要提供了类型系统和对ES6的支持,下面这篇文章主要给大家介绍了关于TypeScript快速上手语法及结合vue3用法的相关资料,需要的朋友可以参考下2024-02-02
这篇文章主要介绍了javascript如何实现多边形碰撞检测，帮助大家更好的理解和使用js，感兴趣的朋友可以了解下2020-10-10
JavaScript选取(picking)和反选(rejecting)对象的属性方法
这篇文章主要介绍了JavaScript选取(picking)和反选(rejecting)对象的属性方法的相关资料,需要的朋友可以参考下2017-08-08
在js中自一些字符串删除空格的功能，本文章来介绍了字符串删除功能加利用正则快速替换字符串中所有空格实现代码2012-10-10
最新评论