微信小程序 this.triggerEvent()的具体使用


Posted in Javascript onDecember 10, 2019

在对组件进行封装时 在当前页面想要获取组件中的某一状态,需要使用到this.triggerEvent(' ',{},{}),第一个参数是自定义事件名称,这个名称是在页面调用组件时bind的名称,第二个对象就可以将想要的属性拿到,第三个参数文档中有介绍,有机会再做补充。

在这个demo中like组件是我要封装的组件,在classic.wxml中调用的:

微信小程序 this.triggerEvent()的具体使用

组件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)
  }

微信小程序 this.triggerEvent()的具体使用

event.detail.behavior就可以拿到是不是喜欢的属性了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
namespace.js Javascript的命名空间库
Oct 11 Javascript
JS控制日期显示的小例子
Nov 23 Javascript
JavaScript中的标签语句用法分析
Feb 10 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
Nov 04 Javascript
js操作table元素实现表格行列新增、删除技巧总结
Nov 18 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
Mar 29 Javascript
js 获取元素的具体样式信息getcss(实例讲解)
Jul 05 Javascript
JavaScript+H5实现微信摇一摇功能
May 23 Javascript
详解create-react-app 自定义 eslint 配置
Jun 07 Javascript
javascript中UMD规范的代码推演
Aug 29 Javascript
axios使用拦截器统一处理所有的http请求的方法
Nov 02 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
Nov 14 Javascript
jQuery实现消息弹出框效果
Dec 10 #jQuery
jQuery实现弹出层效果
Dec 10 #jQuery
javascript实现弹出层效果
Dec 10 #Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
Dec 10 #Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
Dec 10 #Javascript
微信小程序登陆注册功能的实现代码
Dec 10 #Javascript
vue excel上传预览和table内容下载到excel文件中
Dec 10 #Javascript
You might like
第十三节 对象串行化 [13]
2006/10/09 PHP
全世界最小的php网页木马一枚 附PHP木马的防范方法
2009/10/09 PHP
PHP中register_globals参数为OFF和ON的区别(register_globals 使用详解)
2012/02/05 PHP
基于php iconv函数的使用详解
2013/06/09 PHP
PHP字符串word末字符实现大小写互换的方法
2014/11/10 PHP
php启用sphinx全文搜索的实现方法
2014/12/24 PHP
脚本吧 - 幻宇工作室用到js,超强推荐share.js
2006/12/23 Javascript
用YUI做了个标签浏览效果
2007/02/20 Javascript
html5+javascript制作简易画板附图
2014/04/25 Javascript
js中hash和ico的关联分析
2015/02/05 Javascript
JavaScript数据类型之基本类型和引用类型的值
2015/04/01 Javascript
酷炫jQuery全屏3D焦点图动画效果
2016/03/22 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
2016/05/17 Javascript
javascript使用 concat 方法对数组进行合并的方法
2016/09/08 Javascript
Angular angular-file-upload文件上传的示例代码
2018/08/23 Javascript
vue实现随机验证码功能的实例代码
2019/04/30 Javascript
vue使用swiper.js重叠轮播组建样式
2019/11/14 Javascript
Python常用正则表达式符号浅析
2014/08/13 Python
python文件写入实例分析
2015/04/08 Python
Python cookbook(数据结构与算法)字典相关计算问题示例
2018/02/18 Python
python基础教程项目三之万能的XML
2018/04/02 Python
Python for循环生成列表的实例
2018/06/15 Python
python版大富翁源代码分享
2018/11/19 Python
Django实现网页分页功能
2019/10/31 Python
如何查找网页漏洞
2016/06/22 面试题
高中毕业生生活的自我评价
2013/12/08 职场文书
积极向上的团队口号
2014/06/06 职场文书
计算机科学技术自荐信
2014/06/12 职场文书
云南省召开党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
2015年初中元旦晚会活动总结
2014/11/28 职场文书
给老婆的保证书怎么写
2015/05/08 职场文书
董事长致辞
2015/07/29 职场文书
安全教育主题班会教案
2015/08/12 职场文书
利用Python实现Picgo图床工具
2021/11/23 Python
Nginx+Tomcat负载均衡多实例详解
2022/04/11 Servers
java获取一个文本文件的编码(格式)信息
2022/09/23 Java/Android