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
使用する必要があります。
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
変数にアクセスできることを確認してください。