Поиск…


Синтаксис событий

Чтобы отправить событие: vm.$emit('new-message');

Чтобы поймать событие: vm.$on('new-message');

Для того, чтобы отправить событие для всех компонентов вниз: vm.$broadcast('new-message'); . vm.$broadcast('new-message');

Чтобы отправить событие всем компонентам вверх : vm.$dispatch('new-message');

Примечание: $broadcast и $dispatch устарели в Vue2. ( см. функции Vue2 )

Когда следует использовать события?

На следующем рисунке показано, как взаимодействие компонентов должно работать. Изображение происходит от слайдов Progressive Framework от Evan You (разработчика VueJS).

Компонентная связь

Вот пример того, как это работает:

DEMO

HTML

<script type="x-template" id="message-box">
    <input type="text" v-model="msg" @keyup="$emit('new-message', msg)" />
</script>
 
<message-box :msg="message" @new-message="updateMessage"></message-box>
<div>You typed: {{message}}</div>

JS

var messageBox = {
  template: '#message-box',
  props: ['msg']
};
 
new Vue({
  el: 'body',
  data: {
    message: ''
  },
  methods: {
    updateMessage: function(msg) {
      this.message = msg;
    }
  },
  components: {
    'message-box': messageBox
  }
});

Приведенный выше пример можно улучшить!

В приведенном выше примере показано, как работает компонентная связь. Но в случае пользовательского компонента ввода, чтобы синхронизировать родительскую переменную с введенным значением, мы можем использовать v-model .

DEMO Vue1

DEMO Vue2

В Vue1 вы должны использовать .sync на опоре, отправленном в компонент <message-box> . Это указывает VueJS синхронизировать значение в дочернем компоненте с родительским.

Помните: каждый экземпляр компонента имеет свою изолированную область.

HTML Vue1

<script type="x-template" id="message-box">
  <input v-model="value" />
</script>

<div id="app">
  <message-box :value.sync="message"></message-box>
  <div>You typed: {{message}}</div>
</div>

В Vue2 есть специальное событие 'input' которое вы можете $emit . Использование этого события позволяет поместить v-model непосредственно в компонент <message-box> . Пример будет выглядеть следующим образом:

HTML Vue2

<script type="x-template" id="message-box">
  <input :value="value" @input="$emit('input', $event.target.value)" />
</script>

<div id="app">
  <message-box v-model="message"></message-box>
  <div>You typed: {{message}}</div>
</div>

JS Vue 1 & 2

var messageBox = {
  template: '#message-box',
  props: ['value']
};

new Vue({
  el: '#app',
  data: {
    message: ''
  },
  components: {
    'message-box': messageBox
  }
});

Обратите внимание, как быстрее обновляется вход.

Как бороться с устареванием $ dispatch и $ broadcast? (шаблон события шины)

Возможно, вы поняли, что $emit привязан к компоненту, который испускает событие. Это проблема, когда вы хотите общаться между компонентами, расположенными далеко друг от друга в дереве компонентов.

Примечание. В Vue1 вы можете использовать $dispatch или $broadcast , но не в Vue2. Причина в том, что он плохо масштабируется. Существует популярный шаблон bus для управления этим:

DEMO

HTML

<script type="x-template" id="sender">
  <button @click="bus.$emit('new-event')">Click me to send an event !</button>
</script>
 
<script type="x-template" id="receiver">
  <div>I received {{numberOfEvents}} event{{numberOfEvents == 1 ? '' : 's'}}</div>
</script>
 
<sender></sender>
<receiver></receiver>

JS

var bus = new Vue();
 
var senderComponent = {
  template: '#sender',
  data() {
    return {
      bus: bus
    }
  }
};
 
var receiverComponent = {
  template: '#receiver',
  data() {
    return {
      numberOfEvents: 0
    }
  },
  ready() {
    var self = this;
 
    bus.$on('new-event', function() {
      ++self.numberOfEvents;
    });
  }
};
 
new Vue({
  el: 'body',
  components: {
    'sender': senderComponent,
    'receiver': receiverComponent
  }
});

Вам просто нужно понять, что любой экземпляр Vue() может $emit и catch ( $on ) событие. Мы просто объявляем глобальную bus вызовов экземпляра Vue а затем любой компонент с этой переменной может испускать и извлекать из нее события. Просто убедитесь, что компонент имеет доступ к переменной bus .



Modified text is an extract of the original Stack Overflow Documentation
Лицензировано согласно CC BY-SA 3.0
Не связан с Stack Overflow