vue中爺爺組件不能跨父級組件，監(jiān)聽子組件的$emit事件嗎？

這里我點擊child，并不會觸發(fā) grandpa 組件的監(jiān)聽函數(shù)，即使我把parent上面的監(jiān)聽去掉。
正常的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"
        });

回答

編輯回答

墨沫

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

參考餓了么的事件冒泡

2017年3月31日 16:14

編輯回答

爆扎

$emit can't bubbling to parents module

2017年8月27日 15:10

編輯回答

鹿惑

你需要在parent中繼續(xù)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中繼續(xù)emit
        }
      },
      components: {
        'child': {
          template: `<div @click="$emit('update',33)">child</div>`
        }
      }
    }
  }
})

2017年5月28日 03:21

編輯回答

笑忘初

用vuex吧

2018年8月22日 18:58

編輯回答

乖乖瀦

題主的意思是為什么這么設計吧
因為在vue 中如果爺爺和孫子能夠直接通信，那么兒子和爸爸通信是不是就很不清晰了
如果都監(jiān)聽一個事件，我如何知道是那個孩子告訴我的呢？
但是如果只能父子通信，我可以在父子之間設置不同的通信協(xié)議
或者你使用狀態(tài)管理工具
看似是代碼量增加了，其實降低了復雜度，提升了明確性
同時提升了性能( 我還是覺得是性能問題 )
如果真的要弄懂為啥這樣設計你去私信尤大好了

2017年12月28日 22:01