Vue.js
Veranstaltungen

Ereignissyntax

So senden Sie ein Ereignis: vm.$emit('new-message');

Um ein Ereignis vm.$on('new-message'); : vm.$on('new-message');

So senden Sie ein Ereignis für alle Komponenten nach unten: vm.$broadcast('new-message'); . vm.$broadcast('new-message');

Um ein Ereignis für alle Komponenten bis senden: vm.$dispatch('new-message');

Hinweis: $broadcast und $dispatch werden in Vue2 nicht weiter unterstützt. ( siehe Vue2-Funktionen )

Wann sollte ich Events nutzen?

Das folgende Bild zeigt, wie die Komponentenkommunikation funktionieren sollte. Das Bild stammt von The Progressive Framework Folien von Evan You (Entwickler von VueJS).

Hier ist ein Beispiel, wie es funktioniert:

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
  }
});

Das obige Beispiel kann verbessert werden!

Das obige Beispiel zeigt, wie die Komponentenkommunikation funktioniert. Im Falle einer benutzerdefinierten Eingabekomponente sollten Sie jedoch v-model , um die übergeordnete Variable mit dem eingegebenen Wert zu synchronisieren.

DEMO Vue1

DEMO Vue2

In Vue1 sollten Sie .sync für die Requisite verwenden, die an die <message-box> -Komponente gesendet wurde. Dies weist VueJS an, den Wert in der untergeordneten Komponente mit dem übergeordneten zu synchronisieren.

Denken Sie daran: Jede Komponenteninstanz hat ihren eigenen isolierten Bereich.

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>

In Vue2 gibt es ein spezielles 'input' -Ereignis, das Sie $emit . Mit diesem Ereignis können Sie ein v-model direkt in die <message-box> -Komponente einfügen. Das Beispiel sieht wie folgt aus:

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
  }
});

Beachten Sie, wie schnell die Eingabe aktualisiert wird.

Wie gehe ich mit der Abwertung von $ dispatch und $ broadcast um? (Busereignismuster)

Möglicherweise haben Sie erkannt, dass $emit emit für die Komponente gilt, die das Ereignis auslöst. Dies ist ein Problem, wenn Sie in der Komponentenstruktur zwischen weit voneinander entfernten Komponenten kommunizieren möchten.

Hinweis: In Vue1 können Sie $dispatch oder $broadcast , nicht jedoch in Vue2. Der Grund ist, dass es nicht gut skaliert. Es ist ein beliebtes bus Muster , dies zu verwalten:

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
  }
});

Sie müssen nur verstehen , dass jede Vue() kann beispielsweise $emit und zu fangen ( $on ) ein Ereignis. Wir erklären , nur einen globalen Vue Instanz Anruf bus und dann jede Komponente mit diesen Variablen kann daraus emittieren und fangen Ereignisse. So stellen Sie sicher , dass die Komponente Anbindung an die Autobahnen bus variabel.