emitter.js 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. /**
  2. * 递归使用call方式 this指向
  3. *
  4. * @param {String} componentName 需要查找的组件的名称
  5. * @param {String} eventName 事件名称
  6. * @param {Object} params 需要传递的参数
  7. */
  8. function broadcast(componentName, eventName, params) {
  9. // 循环子节点找到需要的节点,没有查找到就递归进行查找
  10. this.$children.map(child => {
  11. if (componentName === child.$options.name) {
  12. child.$emit.apply(child, [eventName].concat(params))
  13. } else {
  14. broadcast.apply(child, [componentName, eventName].concat(params))
  15. }
  16. })
  17. }
  18. export default {
  19. methods: {
  20. /**
  21. * 派发 向上查找一个
  22. * @param {Object} componentName 需要查找的组件的名称
  23. * @param {Object} eventName 事件名称
  24. * @param {Object} params 需要传递的参数
  25. */
  26. dispatch(componentName, eventName, params) {
  27. // 找到最近父节点 $root 根节点
  28. let parent = this.$parent || this.$root
  29. // 获取当前实例的名称
  30. let name = parent.$options.name
  31. // 当前存在节点并且当前节点没有名称或者名称不等于我们要查找的节点名称,则继续遍历
  32. while (parent && (!name || name !== componentName)) {
  33. parent = parent.$parent
  34. if (parent) {
  35. name = parent.$options.name
  36. }
  37. }
  38. // 如果有节点则表示找到
  39. if (parent) {
  40. parent.$emit.apply(parent, [eventName].concat(params))
  41. }
  42. },
  43. /**
  44. * 广播 向下查找多个
  45. * @param {Object} componentName 需要查找的组件的名称
  46. * @param {Object} eventName 事件名称
  47. * @param {Object} params 需要传递的参数
  48. */
  49. broadcast(componentName, eventName, params) {
  50. broadcast.call(this, componentName, eventName, params)
  51. }
  52. }
  53. }