案例结构

首先,我还是会以案例的形式向大家讲解(这样也能方便大家更好的理解)
简单介绍一下案例项目的内容(以上一章自定义组件的案例为基础)
项目名称:component
自定义子组件cpt
父组件:logs

在子组件cpt中有一个按钮,按钮上显示的是当前这按钮组件存储的数值counter.

父组件logs引用三个cpt子组件,在父组件有它自己的第一个变量total.

每点击一次不同的按钮都让按钮上的数值不同大小的增加,

同时total变量记录的是三个按钮的数值总和,如图:

编写子组件

cpt.wxml

<!-- 这是自定义组件的内部WXML结构 -->
<view class="inner">
<button bindtap="_incrementCounter">{{counter}}</button>
</view>

子组件cpt中有一个按钮,按钮添加点击事件_incrementCounter,同时按钮内容显示的是其数值counter

cpt.js

Component({
properties: {
// 这里定义了num属性,属性值可以在组件使用时指定
num: { // num定义的就是点击每个按钮分别增加的数值,可以在调用组件的时候进行更改
type: Number,
value: 1
}
},
data: {
// 这里是一些组件内部数据
counter: 0 // counter定义的是每个按钮上的数值
},
methods: {
// 这里是一个自定义方法,每次点击按钮增加对应的数值
_incrementCounter (e) {
let num = this.data.num
this.setData({
counter: this.data.counter + num
})
// 微信小程序中是通过triggerEvent来给父组件传递信息的
this.triggerEvent('increment', {num: num}) // 将num通过参数的形式传递给父组件
}
}
})

 

编写父组件

子组件编写完之后,就可以在父组件logs中引用了,并且给它设定自定义事件
(别忘了在父组件的.json文件中进行引用哟)
logs.json

{
"navigationBarTitleText": "查看启动日志",
"usingComponents": {
"component-tag-name": "../components/cpt/cpt"
}
}

logs.wxml

<!--logs.wxml-->
<view class="container log-list">
<!-- 以下是对一个自定义组件的引用 -->
三个按钮总和: {{total}}
<component-tag-name bind:increment="incrementTotal" num="2"></component-tag-name>
<component-tag-name bind:increment="incrementTotal" num="3"></component-tag-name>
<component-tag-name bind:increment="incrementTotal" num="5"></component-tag-name>
</view>

logs.js

Page({
data: {
logs: [],
total: 0, // 父组件中的数据total用以记录三个按钮总和
},
incrementTotal (e) { // 定义父组件的
console.log(e.detail) // 通过e.detail获取点击的那个对象
var num = e.detail.num
this.setData({
total: this.data.total + e.detail.num
})
},
})

分别点击三个按钮时可以看到数值上都有变化的,并且控制台输出的e.detail中也有对应的num属性.

原文:https://www.jianshu.com/p/9a35a8b961f2

微信小程序自定义事件的更多相关文章

  1. 微信小程序自定义弹窗wcPop插件|仿微信弹窗样式

    微信小程序自定义组件弹窗wcPop|小程序消息提示框|toast自定义模板弹窗 平时在开发小程序的时候,弹窗应用场景还是蛮广泛的,但是微信官方提供的弹窗比较有局限性,不能自定义修改.这个时候首先想到的 ...

  2. 微信小程序自定义 tabbar

    一定的需求情况下,无法使用小程序原生的 tabbar 的时候,需要自行实现一个和 tabbar 功能一模一样的自制组件. 查阅了海量的博客和文档之后,亲自踩坑.总结了三种在不使用微信小程序原生 tab ...

  3. 微信小程序 自定义导航组件 nav头部 全面屏设计

    nav-dynamic 微信小程序自定义nav头部组件:适配全面屏设计: 实现功能 初始进入页面时,展示初始状态下的nav样式: 页面滚动时,监听页面滚动事件,展示滚动状态下的nav样式: 根据配置字 ...

  4. 微信小程序自定义组件,提示组件

    微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加“components”目录,然后像添加Page页面一样添加自定义组 ...

  5. 微信小程序自定义Tabber,附详细源码

    目录 1,前言 2,说明 3,核心代码 1,前言 分享一个完整的微信小程序自定义Tabber,tabber按钮可以设置为跳转页面,也可以设置为功能按钮.懒得看文字的可以直接去底部,博主分享了小程序代码 ...

  6. 微信小程序——自定义导航栏

    微信头部导航栏可能通过json配置: 但是有时候我们项目需求可能需要自定义头部导航栏,如下图所示: 现在具体说一下实现步骤及方法: 步骤: 1.在 app.json 里面把 "navigat ...

  7. 微信小程序-自定义底部导航

    代码地址如下:http://www.demodashi.com/demo/14258.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  8. 微信小程序中事件

    微信小程序中事件 一.常见的事件有 类型 触发条件 最低版本 touchstart 手指触摸动作开始 touchmove 手指触摸后移动 touchcancel 手指触摸动作被打断,如来电提醒,弹窗 ...

  9. 微信小程序自定义tabbar的实现

    微信小程序自定义tabbar的实现 目的:当采用微信的自定义tabbar组件的时候,切换的时候会出现闪屏的效果:当使用微信默认的tabbar的时候,限制了tabbar的数量以及灵活配置. 方案:自己动 ...

随机推荐

  1. Android关于inflate的root参数

    最近在用View inflate(Context context, int resource, ViewGroup root)方法时,在第三个参数root上碰到了点麻烦. 一般在写ListView的a ...

  2. 下载pubmed数据

    1 import requests 2 import json 3 4 search_url = "https://eutils.ncbi.nlm.nih.gov/entrez/eutils ...

  3. ODPS基础

    遇到一个项目需求是统计128张分库分表的数据表记录的最大id,通过单表查询计算非常费时,也无法应对分表数更多的情况,因此考虑到通过odps进行任务发布和运算 在云端 http://d2.alibaba ...

  4. 在C#中控制ListBox某一行的字体颜色

    例1 private void Form1_Load(object sender, EventArgs e) { listBox1.Items.Add("红色"); listBox ...

  5. Android Studio 2.3.3 调用asp.net webService实战(拒绝忽悠)

    1.路径中不能包含localhost(本来想在本机调试,就是不行,没办法发布到远程服务器) 2.必须采用异步的办法(阻塞主线程的是肯定不行了) 3.以下是全部的源代码(毫不保留) package co ...

  6. JNI 里使用STL

    JNI里的c或者c++ 调用stl 的时候,比如引入map头文件: #include <map> 在cygwin使用NDK编译的时候,会提示: fatal error:map: No su ...

  7. UNITY中使用不安全代码的相关设置

    必须执行以下三个步骤 1,在工程属性中设置:属性-生成-允许不安全代码 2,在Assets目录下增加 smcs.rsp(若打包设置中使用了.net 2.0 subset)或 gmcs.rsp(若打包设 ...

  8. iss 默认上传大小为30 M

    在 Windows7(iis7.5).Win2008(iis 7.0)和Win2003(iis 6.0) 中,默认设置是特别严格和安全的,这样可以最大限度地减少因以前太宽松的超时和限制而造成的攻击.指 ...

  9. Apache Hive (二)Hive安装

    转自:https://www.cnblogs.com/qingyunzong/p/8708057.html Hive的下载 下载地址http://mirrors.hust.edu.cn/apache/ ...

  10. zoj1037-Gridland

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=37 Gridland Time Limit: 2 Seconds      Me ...