Can't grandfather components in vue listen for $emit events of child components across parent components?

clicking child, here will not trigger the listener function of the grandpa component, even if I remove the listener on the parent.
normal dom element events also bubble, so why is it designed like this? 

child</div>`
                        }
                    }
                }
            }
        });
        new Vue({
            el: "-sharproot"
        });
Vue.js
Mar.09,2021

you need to continue emit :

in parent . 
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) // parentemit
        }
      },
      components: {
        'child': {
          template: `<div @click="$emit('update',33)">child</div>`
        }
      }
    }
  }
})

$emit can't bubbling to parents module

what the subject means is why it is designed this way.
because in vue, if grandpa and grandson can communicate directly, it is not very clear whether son and father can communicate directly.
if both monitor an event, How do I know that kid told me?
but if you can only communicate between father and son, I can set different communication protocols between father and son
, or if you use the state management tool
, it seems that the amount of code increases, but actually reduces the complexity. Improved clarity
and improved performance (I still think it's a performance problem)
if you really want to figure out why it's designed this way, you'd better send private messages

use vuex

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

refer to the event bubbling of ele.me

Previous: Can axios send cookie from other domain?

Next: Pointers to arrays in golang

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu