vue中爷爷组件不能跨父级组件，监听子组件的$emit事件吗？

Question

这里我点击child，并不会触发 grandpa 组件的监听函数，即使我把parent上面的监听去掉。
正常的dom元素事件也是会冒泡的，为什么这样设计呢？

Vue.component('grandpa', {            
            template: '<div >grandpa<parent @update="handleUpdate"></parent></div>',
            methods: {
                handleUpdate() {
                    console.log("grandpa update")
                }
            },
            components: {
                'parent': {
                    template: `<div>parent<child @update="handleUpdate"></child></div>`,
                    methods:{
                        handleUpdate() {
                            console.log("parent update")
                        }
                    },
                    components: {
                        'child': {
                            template: `<div @click="$emit('update',33)">child</div>`
                        }
                    }
                }
            }
        });
        new Vue({
            el: "#root"
        });

Answer 1

你需要在parent中继续emit：

Vue.component('grandpa', {
  template: '<div >grandpa<parent @update="handleUpdate"></parent></div>',
  methods: {
    handleUpdate (data) {
      console.log('grandpa update ' + data) // grandpa update 33
    }
  },
  components: {
    'parent': {
      template: `<div>parent<child @update="handleUpdate"></child></div>`,
      methods: {
        handleUpdate (data) {
          console.log('parent update ' + data) // parent update 33
          this.$emit('update', data) // 在parent中继续emit
        }
      },
      components: {
        'child': {
          template: `<div @click="$emit('update',33)">child</div>`
        }
      }
    }
  }
})

Answer 2

$emit can't bubbling to parents module

Answer 3

题主的意思是为什么这么设计吧
因为 在vue 中 如果 爷爷和孙子 能够直接通信，那么 儿子和爸爸 通信 是不是 就 很不清晰了
如果都监听一个 事件，我如何 知道 是 那个 孩子告诉我的呢？
但是如果 只能 父子通信，我可以 在父子之间设置 不同的 通信协议
或者你 使用 状态管理工具
看似是代码量增加了，其实降低 了 复杂度，提升了明确性
同时 提升了性能( 我还是觉得是性能问题 )
如果 真的要弄懂为啥这样设计 你去私信 尤大 好了

Answer 4

用vuex吧

Answer 5

https://github.com/ElemeFE/el...

参考饿了么的事件冒泡