作者:Uheinanba,来自原文地址
组件页面通信
- 使用globalData或者storage的弊端(造成的隐蔽的bug)。
- 使用eventBus的问题。(使用复杂)
尝试解决方案
- event + emit
- invoke(推荐)
混合(mixin)
混合可以将组之间的可复用部分抽离,从而在组件中使用混合时,可以将混合的数据,事件以及方法注入到组件之中。混合分为两种:
- 默认式混合
-
兼容式混合
-
默认式混合
对于组件data数据,events事件 采用默认式混合,即如果组件未声明该数据,组件,事件,自定义方法等,那么将混合对象中的选项将注入组件这中。对于组件已声明的选项将不受影响。 -
兼容式混合
对于组件methods响应事件,以及小程序页面事件将采用兼容式混合,即先响应组件本身响应事件,然后再响应混合对象中响应事件。
-
event.js
- var events = {};
- function on(name, self, callback) {
- var tuple = [self, callback];
- var callbacks = events[name];
- if (Array.isArray(callbacks)) {
- callbacks.push(tuple);
- } else {
- events[name] = [tuple];
- }
- }
- function remove(name, self) {
- var callbacks = events[name];
- if (Array.isArray(callbacks)) {
- events[name] = callbacks.filter((tuple) => {
- return tuple[0] != self;
- })
- }
- }
- function emit(name, data) {
- var callbacks = events[name];
- if (Array.isArray(callbacks)) {
- callbacks.map((tuple) => {
- var self = tuple[0];
- var callback = tuple[1];
- callback.call(self, data);
- })
- }
- }
- exports.on = on;
- exports.remove = remove;
- exports.emit = emit;
invoke.js
- function getAllPages() {
- let stack = getCurrentPages();
- // 第一个入栈
- stack.forEach((item) => {
- if (myStatcks.length === 0) {
- myStatcks = stack.concat();
- } else {
- for (let i = 0, _len = myStatcks.length; i < _len; i++) {
- let ele = myStatcks[i];
- if (ele.__route__ === item.__route__) {
- myStatcks[i] = item;
- break;
- } else {
- myStatcks.push(item);
- break;
- }
- }
- }
- });
- // }
- return myStatcks;
- }
- module.exports = function $invoke(router, method, args) {
- let pages = getAllPages();
- let targetPage;
- for (let index = 0, _len = pages.length; index < _len; index++) {
- if (pages[index].__route__ === router) {
- targetPage = pages[index];
- break;
- }
- }
- targetPage[method].call(targetPage, ...args);
- }