There is a main component and a field for a "router", the contents of which vary depending on the url. I cannot get from the component of the router to the main component, transfer the values, and vice versa, from the main component to the child components located in the field of the router.
How to call functions and pass values ​​to another component of vue.js?

    1 answer 1

    Looking at what version? in version Vue 1. *

    1) this.$dispatch('someEvent',[params,...]); - initiate an event from the component to the top (for all parents)

    2) this.$broadcast('someEvent',[params,...]); - broadcast the event to all descendants

    in the component intercept event

     export default { data(){}, events:{ 'someEvent':function([params,...]){} } }

    In version Vue 2. * a little different, they abandoned all of this.

    You need to create another instance of Vue. This is usually done like this:

     var eventHub = new Vue(); eventHub.$on('test', function (msg) { console.log(msg) }) new Vue({ el: '#app', data(){ return { eventHub:eventHub } } })

    Further, in any component in the method, you can do this:

     this.$root.eventHub.$emit('test','Тестовое сообщение')

    Actually on can be done inside components in

     mounted(){ var self = this; this.$root.eventHub.$on('test',function(){ //тут используем self для доступа к данным компонента }) }