微信小程序 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 相关文章推荐
JQquery的一些使用心得分享
Aug 01 Javascript
javascript字符串替换函数如何一次性全部替换掉
Oct 30 Javascript
jQuery实现的倒计时效果实例小结
Apr 16 Javascript
Bootstrap3.0学习教程之JS折叠插件
May 27 Javascript
SVG描边动画
Feb 23 Javascript
《javascript少儿编程》location术语总结
May 27 Javascript
深入探讨JavaScript的最基本部分之执行上下文
Feb 12 Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
Apr 26 Javascript
vue element-ui实现input输入框金额数字添加千分位
Dec 29 Javascript
Vue 打包体积优化方案小结
May 20 Javascript
Angular8 简单表单验证的实现示例
Jun 03 Javascript
javascript实现倒计时关闭广告
Feb 09 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
DIY实用性框形天线
2021/03/02 无线电
php中用date函数获取当前时间有误的解决办法
2013/08/02 PHP
destoon供应信息title调用出公司名称的方法
2014/08/22 PHP
PHP PDO fetch 模式各种参数的输出结果一览
2015/01/07 PHP
深入讲解PHP Session及如何保持其不过期的方法
2015/08/18 PHP
js调用webservice中的方法实现思路及代码
2013/02/25 Javascript
nodejs URL模块操作URL相关方法介绍
2015/03/03 NodeJs
JavaScript三元运算符的多种使用技巧
2015/04/16 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
2015/12/04 Javascript
全面了解javascript中的错误处理机制
2016/07/18 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
2016/08/05 Javascript
微信小程序 视图容器组件的详解及实例代码
2017/01/19 Javascript
浅谈Koa服务限流方法实践
2017/10/23 Javascript
详解Vue取消eslint语法限制
2018/08/04 Javascript
vue中使用gojs/jointjs的示例代码
2018/08/24 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
2018/09/05 Javascript
vue 解决数组赋值无法渲染在页面的问题
2019/10/28 Javascript
详解React 条件渲染
2020/07/08 Javascript
[00:32]2018DOTA2亚洲邀请赛OpTic出场
2018/04/03 DOTA
编写Python脚本抓取网络小说来制作自己的阅读器
2015/08/20 Python
Python常用的内置序列结构(列表、元组、字典)学习笔记
2016/07/08 Python
Python爬虫实现获取动态gif格式搞笑图片的方法示例
2018/12/24 Python
详解Python做一个名片管理系统
2019/03/14 Python
Python生成MD5值的两种方法实例分析
2019/04/26 Python
python的json包位置及用法总结
2020/06/21 Python
美国韩国化妆品和护肤品购物网站:Beautytap
2018/07/29 全球购物
澳大利亚珍珠首饰购物网站:Vayo Pearls
2019/03/11 全球购物
校园网站的创业计划书范文
2013/12/30 职场文书
学年自我鉴定
2014/01/16 职场文书
秋季运动会广播稿(30篇)
2014/09/13 职场文书
信息合作协议书
2014/10/09 职场文书
2016年中学端午节主题活动总结
2016/04/01 职场文书
干货:企业内部人才推荐奖励方案!
2019/07/09 职场文书
MySQL数据迁移相关总结
2021/04/29 MySQL
关于Python使用turtle库画任意图的问题
2022/04/01 Python
vue生命周期钩子函数以及触发时机
2022/04/26 Vue.js