不用vuex的情况下，隔代组件间的通信

最新推荐文章于 2024-05-15 10:00:00 发布

weixin_34357962

最新推荐文章于 2024-05-15 10:00:00 发布

阅读量383

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5caf64e25188251acc538f9c

版权

优点：适合开发层级不会很复杂的独立组件，无需借助vuex

缺点：依赖组件树的结构，比如需要知道A和B谁是父，谁是子，然后父中broadcast,子中dispatch。

先列一个简单的case:

<!--child.vue-->
export default {
  methods: {
    handleEmitEvent () {
      this.$emit('test', 'Hello Vue.js')
    }
  }
}
复制代码

<!--parent.vue-->
<template>
  <child-component @test="handleEvent">
</template>
<script>
  export default {
    methods: {
      handleEvent (text) {
      	console.log(text)  // Hello Vue.js
      }
    }
  }
</script>
复制代码

子组件触发（$emit），父组件监听($on)。

So, 既然是子组件自己触发的，那它自己也可以监听到，即组件自己监听自己的emit。

<template>
  <div>
    <button @click="handleEmitEvent">触发自定义事件</button>
  </div>
</template>
<script>
  export default {
    methods: {
      handleEmitEvent () {
        this.$emit('test', 'Hello Vue.js')
      }
    },
    created () {
      this.$on('test', (text) => {
         console.log(text) // Hello Vue.js
      });
    }
  }
</script>
复制代码

乍一看多次一举， handleEmitEvent可以直接写逻辑，没必要emit,on这样绕了一圈

如果handleEmitEvent不是通过该组件自身调用的呢？

设想这样的场景，A是父组件，B是子组件，中间可能跨多级。 A向B通信：

<!--A.vue-->
<template>
	<input @focus="handleFocus">触发事件 />
</template>
<script>
  import Emitter from '../mixins/emitter.js'; // 先忽略混入的内容
  export default {
    name: 'componentA',
    mixins: [ Emitter ],
    methods: {
      handleFocus () {
        this.broadcast('componentB', 'sendMessage', '我被点了'); // 后面会放实现逻辑
      }
    }
  }
</script>
复制代码

<!--B.vue-->
<script>
export default {
  name: 'componentB',
  created () {
    this.$on('sendMessage', this.showMessage)
  },
  methods: {
    showMessage (text) {
      console.log(text); // 我被点了
    }
  }
}
</script>
复制代码

事件触发点是A组件中的input被focus，但是为什么B组件中可以监听到呢？

看完下面Emitter的实现就明白了。

function broadcast(componentName, eventName, params) {
  this.$children.forEach(child => {
    const name = child.$options.name;

    if (name === componentName) {
      child.$emit.apply(child, [eventName].concat(params));
    } else {
      broadcast.apply(child, [componentName, eventName].concat([params]));
    }
  });
}
export default {
  methods: {
    dispatch(componentName, eventName, params) {
      let parent = this.$parent || this.$root;
      let name = parent.$options.name;

      while (parent && (!name || name !== componentName)) {
        parent = parent.$parent;

        if (parent) {
          name = parent.$options.name;
        }
      }
      if (parent) {
        parent.$emit.apply(parent, [eventName].concat(params));
      }
    },
    broadcast(componentName, eventName, params) {
      broadcast.call(this, componentName, eventName, params);
    }
  }
};
复制代码