不用vuex的case下,隔代组件间的通信

原理:参考了Vue.js 1.x中的 broadcast的特性

适合开发层级不会很复杂的独立组件

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

先列一个简单的case,参考vue文档:
子组件

export default {
  methods: {
    handleEmitEvent () {
      this.$emit('test', 'Hello Vue.js');
    }
  }
}

父组件



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



乍看多次一举, handleEmitEvent可以直接写逻辑,没必要emit,on

划重点

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

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



B.vue


这里B监听的事件触发源是A组件中的input,具体调用emit sendMessage的地方其实还是在B组件中,不然B怎么会监听到呢?
其中究竟隐藏着怎样的秘密?
且听下回分解。
写的比较粗糙..
要去接人了。

Core Codes

to be continued...

你可能感兴趣的:(不用vuex的case下,隔代组件间的通信)