Как в vue.js организовать связь между компонентами?

#javascript #router #vuejs #компоненты

Есть главный компонент и поле для "роутера", содержимое которого меняется в зависимости
от url. Я не могу достучаться из компонента роутера к главному компоненту,передать
значения и наоборот- с главного в дочерние, находящиеся в поле роутера.
Как вызывать функции и передавать значания в другой компонент vue.js ?
    

Ответы

Ответ 1

Смотря в какой версии ? 
в версии Vue 1.*

1) this.$dispatch('someEvent',[params,...]); - инициировать событие из компонента
наверх (всем родителям)

2) this.$broadcast('someEvent',[params,...]); - транслировать событие всем потомкам

в самом компоненте перехват события 

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


В версии Vue 2.* немного иначе, там отказались от всего этого. 

Нужно создать еще один экземпляр Vue обычно делается это так:

var eventHub = new Vue();

eventHub.$on('test', function (msg) {
  console.log(msg)
})

new Vue({
  el: '#app',
  data(){
    return {
        eventHub:eventHub
    }
  }
})


Далее в любом компоненте в методе можно сделать так:

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


Собственно on можно делать внутри компонентов в 

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