微信小程序 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 相关文章推荐
js报错 Object doesn't support this property or method的原因分析
Mar 31 Javascript
去掉gridPanel表头全选框的小例子
Jul 18 Javascript
js实现的黑背景灰色二级导航菜单效果代码
Aug 24 Javascript
JavaScript jquery及AJAX小结
Jan 24 Javascript
jQuery基础知识点总结(必看)
May 31 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
Mar 14 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
Jul 10 Javascript
js+SVG实现动态时钟效果
Jul 14 Javascript
JavaScript常见事件对象与操作实例总结
Jan 05 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
Mar 30 Javascript
vue 进阶之实现父子组件间的传值
Apr 26 Javascript
JavaScript arguments.callee作用及替换方案详解
Sep 02 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
合并ThinkPHP配置文件以消除代码冗余的实现方法
2014/07/22 PHP
PHP抓取远程图片(含不带后缀的)教程详解
2016/10/21 PHP
yii2.0框架使用 beforeAction 防非法登陆的方法分析
2019/09/11 PHP
PHP中SESSION过期设置
2021/03/09 PHP
jQuery获取地址栏参数插件(模仿C#)
2010/10/26 Javascript
javascript的函数、创建对象、封装、属性和方法、继承
2011/03/10 Javascript
jQuery UI AutoComplete 使用说明
2011/06/20 Javascript
jquery动态加载图片数据练习代码
2011/08/04 Javascript
如何将网页表格内容导入excel
2014/02/18 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
2014/04/04 Javascript
AngularJS基础学习笔记之表达式
2015/05/10 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
2015/08/19 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
2016/09/24 Javascript
Bootstrap CSS布局之表单
2016/12/17 Javascript
Vue中定义全局变量与常量的各种方式详解
2017/08/23 Javascript
jQuery实现的简单前端搜索功能示例
2017/10/28 jQuery
基于vue2.0实现简单轮播图
2017/11/27 Javascript
vue组件实现进度条效果
2018/06/06 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
2018/07/31 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
2019/01/09 jQuery
Vuex的actions属性的具体使用
2019/04/14 Javascript
Vue基于iview table展示图片实现点击放大
2020/08/05 Javascript
[43:26]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第二场 11.20
2020/11/23 DOTA
对Python中type打开文件的方式介绍
2018/04/28 Python
解决csv.writer写入文件有多余的空行问题
2018/07/06 Python
在python里协程使用同步锁Lock的实例
2019/02/19 Python
python实现一个点绕另一个点旋转后的坐标
2019/12/04 Python
python之生成多层json结构的实现
2020/02/27 Python
django 获取字段最大值,最新的记录操作
2020/08/09 Python
Python 转移文件至云对象存储的方法
2021/02/07 Python
学校司机岗位职责
2013/11/14 职场文书
经典婚礼主持开场白
2014/03/13 职场文书
感恩教师节演讲稿
2014/09/03 职场文书
自荐信格式范文
2015/03/04 职场文书
2020年基层司法所建设情况调研报告
2019/11/30 职场文书
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
2021/07/16 HTML / CSS