@miapp/emitter
v1.0.1
Published
事件触发器
Downloads
8
Keywords
Readme
emitter
事件触发器
使用
直接使用
import Emitter from '@miapp/emitter';
const emitter = new Emitter();
// 绑定事件
emitter.on('select', callback); // 字符串
emitter.on(['select', 'confirm'], callback); // 数组
emitter.on({ // 对象
'select': selectCallback,
'confirm': confirmCallback
});
// 单次绑定,API 同 on
emitter.once('select', callback);
// 触发事件
emitter.emit('select', { value });
// 解除绑定
emitter.off('select', callback); // 解除单个
emitter.off('select'); // 解除整个类型
emitter.off(); // 解除所有
// 销毁
emitter.destroy();
应用/页面/组件内使用
推荐用 mixinEmitter
,见下文
import Emitter from "@miapp/emitter";
// component.js
Component({
didMount() {
this.emitter = new Emitter(this);
this.emitter.on('select', (e) => {
console.log(e.src);
});
},
didUnmout() {
this.emitter.destroy();
},
methods: {
handleTap(e) {
this.emit('select', {
src: 'component'
});
}
}
});
// page.js
Page({
onLoad() {
this.emitter = new Emitter(this);
},
onUnload() {
this.emitter.destroy();
}
});
// app.js
App({
onLaunch() {
this.emitter = new Emitter(this);
}
});
温馨提示:
- 建议命名为
this.emitter
,内部会有一些相关处理逻辑 - 为了保证通信功能,记得初始化时传入
this
哦 - 页面/组件销毁时记得执行
destroy
方法
mixEmitter
为了解决以上几个问题,更方便的使用方式是,直接扩充应用/页面/组件的方法
import { mixinEmitter } from "@miapp/emitter";
Component(mixinEmitter({
didMount() {
this.on('select', () => {});
},
methods: {
handleTap(e) {
this.emit('select', {
src: 'component'
});
}
}
}));
// page.js
Page(mixinEmitter({
onLoad() {
this.on('select', () => {});
}
}));
// app.js
App(mixinEmitter({
onLaunch() {
this.on('select', () => {});
}
}));
通信功能
冒泡
冒泡至页面
// component.js
// component => page
this.emit('selected|page', {
src: 'component'
});
// page.js
this.on('selected', (e) => {
console.log(e.src); // component
});
同时冒泡到页面和应用
// component.js
// component => page => app
this.emit('selected|app', {
src: 'component'
});
// page.js
this.on('selected', (e) => {
console.log(e.src); // component
});
// app.js
this.on('selected', (e) => {
console.log(e.src); // component
});
捕获
如果组件想捕获页面或者全局应用发出的事件
// app.js
this.emit('selected', {
src: 'app'
});
// page.js
this.emit('selected', {
src: 'page'
});
// component.js
// 监听 page 的 selected 事件
this.on('selected|page', (e) => {
console.log(e.src); // page
});
// 监听 app 的 selected 事件
this.on('selected|app', (e) => {
console.log(e.src); // app
});
组件之间通信
利用页面事件作为中转
// a => page => b
// a.js
this.emit('a:selected|page', {
src: 'a'
});
// b.js
this.on('a:selected|page', (a) => {
console.log(e.src); // a
});
事件命名
prefix:event|broadcast
event
: 事件名称prefix
: 自定义组件前缀,用于区分来源,默认为空broadcast
: 监听从页面或者应用触发的事件,或者触发事件传播至页面或应用,只有两个值,page
和app
,默认为空
开发
更多命令
miapp newbranch
: 新建分支miapp push
: 提交代码miapp prepub
: 预发(发布 beta 版本)miapp publish
: 正式发布