Шина для связи компонентов Vue

Vue.js Vuex

Что касается компонентного общения, я считаю, что мои друзья должны быть знакомы с ним, поэтому я не буду говорить больше.здесь.
В vue2.0 $dispatch и $broadcast устарели. Объяснение, данное в официальной документации:

Потому что поток событий, основанный на древовидной структуре компонентов, действительно сложно понять, и он будет становиться все более и более хрупким по мере расширения структуры компонентов. Такой ход событий действительно не очень хорош, и мы не хотим причинять разработчикам слишком много боли в будущем. А $dispatch и $broadcast не решили проблему связи между родственными компонентами.

Официально рекомендуемое решение для управления состоянием:Vuex. Однако, если проект не очень большой и управление состоянием не очень сложное, используйтеVuexЕсть ощущение использования ножа для убийства цыплят.Конечно, это также основано на ваших собственных потребностях, это просто предложение.

В официальной документации vue есть такое определение:Связь между компонентами, не являющимися родительскими и дочерними, с очень небольшим содержанием, следующим образом:

image

Собственно об этомКоммуникация между компонентами, не являющимися родительскими и дочернимиДемо все еще там, оно спрятано вв документации по миграции для $dispatch и $broadcast, заинтересованные друзья могут нажать для просмотра. Совет в документации:

Самый простой способ обновить $dispatch и $broadcast — использовать концентратор событий, позволяющий компонентам свободно взаимодействовать, независимо от того, на каком уровне находится компонент в дереве компонентов. Поскольку экземпляры Vue реализуют интерфейс диспетчеризации событий, вы можете сделать это, создав пустой экземпляр Vue.

этоПромежуточное ПО для централизованных событийэтоBus. Я привык определять шину глобально:

app.js

var eventBus = {
    install(Vue,options) {
        Vue.prototype.$bus = vue
    }
};
Vue.use(eventBus);

Затем в компоненте вы можете использовать $emit, $on, $off для отправки, прослушивания и отмены событий прослушивания соответственно:

Компонент, который отправляет события

// ...
methods: {
  todo: function () {
    this.$bus.$emit('todoSth', params);  //params是传递的参数
    //...
  }
}

слушающий компонент

// ...
created() {
  this.$bus.$on('todoSth', (params) => {  //获取传递的参数并进行操作
      //todo something
  })
},
// 最好在组件销毁前
// 清除事件监听
beforeDestroy () {
  this.$bus.$off('todoSth');
},

Если вам нужно прослушать несколько компонентов, просто изменитеbusизeventName:

// ...
created() {
  this.$bus.$on('firstTodo', this.firstTodo);
  this.$bus.$on('secondTodo', this.secondTodo);
},
// 清除事件监听
beforeDestroy () {
  this.$bus.$off('firstTodo', this.firstTodo);
  this.$bus.$off('secondTodo', this.secondTodo);
},

Если статья неверна или есть какие-либо вопросы, добро пожаловать на общение в комментариях.

Категории