Vue.js
イベント

イベント構文

イベントを送信するには： vm.$emit('new-message');

イベントをキャッチするには： vm.$on('new-message');

すべてのコンポーネントダウンにイベントを送信するには： vm.$broadcast('new-message');

までのすべてのコンポーネントにイベントを送信するには： vm.$dispatch('new-message');

注： Vue2では、 $broadcastと$dispatchは非推奨です。 （ Vue2の機能を参照 ）

イベントはいつ使うべきですか？

次の図は、コンポーネント通信がどのように機能するかを示しています。この写真は、 Evan You のProgressive Frameworkスライド（VueJSの開発者）からのものです。

どのように動作するかの例を以下に示します。

デモ

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では、 <message-box>コンポーネントに送信されたプロップで.syncを使用する必要があります。これは、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ビュー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 broadcastを使用しますが、Vue2では使用しません。理由はそれがうまく拡張できないということです。これを管理するための一般的なbusパターンがあります：

デモ

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 ）できることを理解するだけです。グローバルVueインスタンスコールbusを宣言するだけで、この変数を持つコンポーネントがあればそれからイベントを送出してキャッチできます。コンポーネントがbus変数にアクセスできることを確認してください。