Коммуникация Vue

Ответ 1

В документах Vue.js многокомпонентная связь не получает большого внимания, и нет много учебников, которые охватывают этот вопрос. Поскольку компоненты должны быть изолированы, вы никогда не должны "напрямую обращаться" к компоненту. Это будет тесно связывать компоненты вместе, и именно это вы хотите предотвратить.

Javascript имеет отличный способ общения: события. Vue.js имеет встроенную систему событий, в основном используемую для связи между родителями и детьми. Из документов:

Хотя вы можете напрямую обращаться к родительским экземплярам Vue, удобнее использовать встроенную систему событий для межкомпонентной коммуникации. Это также делает ваш код менее связанным и более легким в обслуживании. После установления отношений родитель-ребенок вы можете отправлять и запускать события с использованием методов экземпляров компонентов компонентов.

Пример кода для иллюстрации системы событий:

var parent = new Vue({
  template: '<div><child></child></div>',
  created: function () {
    this.$on('child-created', function (child) {
      console.log('new child created: ')
      console.log(child)
    })
  },
  components: {
    child: {
      created: function () {
        this.$dispatch('child-created', this)
      }
    }
  }
}).$mount()

Дэн Холлоран недавно написал статью о своей "борьбе" с кросс-компонентным обменом сообщениями в два штук. Это может быть полезно для вас, если вам нужна связь между компонентами, у которых нет отношений между родителями и дочерними элементами.

Другой подход, с которым я столкнулся (кроме использования событий для связи), использует реестр центрального компонента, который ссылается на публичный API с экземпляром связанного с ним компонента. Реестр обрабатывает запросы для компонента и возвращает его открытый API.

В контексте Vue.js события будут доступны по моему оружию выбора.

Ответ 2

В дополнение к ответу pesla см. руководство Раздел "Управление государственным сектором" в разделе "Создание широкомасштабных приложений" : http://vuejs.org/guide/application.html#State_Management. Я создал jsfiddle на основе этого здесь: https://jsfiddle.net/WarwickGrigg/xmpLg92c/.

Этот метод также работает и для компонентов: отношения родительский-дочерний, родственные и родственные компоненты и т.д.

var hub = {
  state: {
    message: 'Hello!'
  }
}

var vmA = new Vue({
    el: '#appA',
    data: {
      pState: {
        dA: "hello A" 
    },
    hubState: hub.state
  }
})

var vmB = new Vue({
    el: '#appB',
    data: {
      pState: {
        dB: "hello B"
    },
    hubState: hub.state
  }
})

Ответ 3

Связь между компонентами также может быть установлена ​​путем создания единого глобального концентратора событий в вашем приложении Vue. Что-то вроде этого: -

var bus = new Vue();

Теперь вы можете создавать пользовательские события и слушать их с любого компонента.

     // A.vue
    // ...
    doThis() {
        // do the job

        bus.$emit('done-this');
    }

    // B.vue
    // ...
       method:{
             foo: function()
          }
    created() {
        bus.$on('done-this', foo);
    }

Подробнее об этом можно узнать из официальной документации.