微信小程序 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 相关文章推荐
一个选择最快的服务器转向代码
Apr 27 Javascript
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
Jan 15 Javascript
javascript中自定义对象的属性方法分享
Jul 12 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
Aug 13 Javascript
javascript动态的改变IFrame的高度实现自动伸展
Oct 12 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
Jul 12 Javascript
JavaScript暂停和继续定时器的实现方法
Jul 18 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
Sep 19 Javascript
Node.js实现连接mysql数据库功能示例
Sep 15 Javascript
基于Vue 服务端Cookies删除的问题
Sep 21 Javascript
使用react render props实现倒计时的示例代码
Dec 06 Javascript
js实现简易计算器功能
Oct 18 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
推荐Discuz!5的PHP代码高亮显示与实现可运行代码
2007/03/15 PHP
php+mysql 实现身份验证代码
2010/03/24 PHP
PHP取得一个类的属性和方法的实现代码
2011/05/22 PHP
PHP不用递归遍历目录下所有文件的代码
2014/07/04 PHP
php实现微信支付之企业付款
2018/05/30 PHP
使用JQuery和s3captche实现一个水果名字的验证
2009/08/14 Javascript
javascript标签在页面中的位置探讨
2013/04/11 Javascript
jQuery异步获取json数据方法汇总
2014/12/22 Javascript
14个有用的Jquery技巧分享
2015/01/08 Javascript
使用jquery 简单实现下拉菜单
2015/01/14 Javascript
JQuery操作textarea,input,select,checkbox方法
2015/09/02 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
2016/09/27 Javascript
Node.js复制文件的方法示例
2016/12/29 Javascript
js实现百度搜索提示框
2017/02/05 Javascript
JS拉起或下载app的实现代码
2017/02/22 Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
2017/07/07 Javascript
浅谈vue+webpack项目调试方法步骤
2017/09/11 Javascript
angular.js实现购物车功能
2017/10/23 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
2018/06/01 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
2019/02/02 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
2019/09/21 Javascript
Python中非常实用的一些功能和函数分享
2015/02/14 Python
Python的Django框架中TEMPLATES项的设置教程
2015/05/29 Python
使用Python生成随机密码的示例分享
2016/02/18 Python
python用户管理系统
2018/03/13 Python
利用python实现AR教程
2019/11/20 Python
Python如何把字典写入到CSV文件的方法示例
2020/08/23 Python
Python pymsql模块的使用
2020/09/07 Python
AssertionError 跟一下那个类是 “is – a”的关系
2012/02/21 面试题
餐饮业员工工作决心书
2014/03/11 职场文书
校本教研活动总结
2014/07/01 职场文书
2015年班长个人工作总结
2015/04/03 职场文书
回门宴新娘答谢词
2015/09/29 职场文书
2016年寒假社会实践活动总结
2015/10/10 职场文书
七年级作文之我的梦想
2019/10/16 职场文书
Redis超详细讲解高可用主从复制基础与哨兵模式方案
2022/04/07 Redis