組件頁面通信

• 使用globalData或者storage的弊端(造成的隱蔽的bug)。
• 使用eventBus的問題。(使用復(fù)雜)

嘗試解決方案

• event + emit
• invoke(推薦)

混合(mixin)

混合可以將組之間的可復(fù)用部分抽離，從而在組件中使用混合時，可以將混合的數(shù)據(jù)，事件以及方法注入到組件之中?；旌戏譃閮煞N：

• 默認(rèn)式混合

• 兼容式混合

  1. 默認(rèn)式混合 
     對于組件data數(shù)據(jù)，events事件 采用默認(rèn)式混合，即如果組件未聲明該數(shù)據(jù)，組件，事件，自定義方法等，那么將混合對象中的選項(xiàng)將注入組件這中。對于組件已聲明的選項(xiàng)將不受影響。

  2. 兼容式混合 
     對于組件methods響應(yīng)事件，以及小程序頁面事件將采用兼容式混合，即先響應(yīng)組件本身響應(yīng)事件，然后再響應(yīng)混合對象中響應(yīng)事件。

event.js

1. var events = {};
2.  
3. function on(name, self, callback) {
4. var tuple = [self, callback];
5. var callbacks = events[name];
6. if (Array.isArray(callbacks)) {
7. callbacks.push(tuple);
8. } else {
9. events[name] = [tuple];
10. }
11. }
12.  
13. function remove(name, self) {
14. var callbacks = events[name];
15. if (Array.isArray(callbacks)) {
16. events[name] = callbacks.filter((tuple) => {
17. return tuple[0] != self;
18. })
19. }
20. }
21.  
22. function emit(name, data) {
23. var callbacks = events[name];
24. if (Array.isArray(callbacks)) {
25. callbacks.map((tuple) => {
26. var self = tuple[0];
27. var callback = tuple[1];
28. callback.call(self, data);
29. })
30. }
31. }
32.  
33. exports.on = on;
34. exports.remove = remove;
35. exports.emit = emit;

invoke.js

1. function getAllPages() {
2. let stack = getCurrentPages();
3. // 第一個入棧
4. stack.forEach((item) => {
5. if (myStatcks.length === 0) {
6. myStatcks = stack.concat();
7. } else {
8. for (let i = 0, _len = myStatcks.length; i < _len; i++) {
9. let ele = myStatcks[i];
10. if (ele.__route__ === item.__route__) {
11. myStatcks[i] = item;
12. break;
13. } else {
14. myStatcks.push(item);
15. break;
16. }
17. }
18. }
19. });
20. // }
21. return myStatcks;
22. }
23.  
24. module.exports = function $invoke(router, method, args) {
25. let pages = getAllPages();
26. let targetPage;
27. for (let index = 0, _len = pages.length; index < _len; index++) {
28. if (pages[index].__route__ === router) {
29. targetPage = pages[index];
30. break;
31. }
32. }
33. targetPage[method].call(targetPage, ...args);
34. }