emitter.js 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. /**
  2. * 递归使用 call 方式this指向
  3. * @param componentName // 需要找的组件的名称
  4. * @param eventName // 事件名称
  5. * @param params // 需要传递的参数
  6. */
  7. function broadcast(componentName, eventName, params) {
  8. // 循环子节点找到名称一样的子节点 否则 递归 当前子节点
  9. var $children;
  10. // #ifdef VUE2
  11. $children = this.$children;
  12. $children.map(child => {
  13. if (componentName === child.$options.name) {
  14. child.$emit.apply(child, [eventName].concat(params))
  15. } else {
  16. broadcast.apply(child, [componentName, eventName].concat(params))
  17. }
  18. })
  19. // #endif
  20. // #ifdef VUE3
  21. //$children = this.uForm.fields;
  22. // #endif
  23. }
  24. export default {
  25. methods: {
  26. /**
  27. * 派发 (向上查找) (一个)
  28. * @param componentName // 需要找的组件的名称
  29. * @param eventName // 事件名称
  30. * @param params // 需要传递的参数
  31. */
  32. dispatch(componentName, eventName, params) {
  33. let parent = this.$parent || this.$root; //$parent 找到最近的父节点 $root 根节点
  34. let name = parent.$options.name; // 获取当前组件实例的name
  35. // 如果当前有节点 && 当前没名称 且 当前名称等于需要传进来的名称的时候就去查找当前的节点
  36. // 循环出当前名称的一样的组件实例
  37. while (parent && (!name || name !== componentName)) {
  38. parent = parent.$parent;
  39. if (parent) {
  40. name = parent.$options.name;
  41. }
  42. }
  43. // 有节点表示当前找到了name一样的实例
  44. if (parent) {
  45. // #ifdef VUE2
  46. parent.$emit.apply(parent, [eventName].concat(params))
  47. // #endif
  48. // #ifdef VUE3
  49. parent[eventName](params)
  50. // #endif
  51. }
  52. },
  53. /**
  54. * 广播 (向下查找) (广播多个)
  55. * @param componentName // 需要找的组件的名称
  56. * @param eventName // 事件名称
  57. * @param params // 需要传递的参数
  58. */
  59. broadcast(componentName, eventName, params) {
  60. broadcast.call(this, componentName, eventName, params)
  61. }
  62. }
  63. }