Vue.jsにおけるテンプレートタグ内で使用できるイベントの受け取りと発行についてみていきます。イベントの受け取りと発行を実際に動かしてみます。
イベントの受け取り方
コンポーネントまたはコンポーネント内のHTMLのイベント(クリックイベントやチェンジイベント)を受け取っていきます。
以前作成したButton.vue(【Vue.js】コンポーネントを使ってみよう)ですでにボタンのクリックイベントを使用しているので、それを使用していきます。
現在Home.vueとButton.vue(テンプレート部分)は以下のようになっています。
Home.vue
<template>
<div class="home">
<Button v-on:click="onClick">button1</Button>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import Button from '@/components/Button.vue';
@Component({
components: {
Button,
},
})
export default class Home extends Vue {
private onClick() {
alert('クリック');
}
}
</script>
Button.vue
<template>
<button
v-on:click="onClick"
>
<slot/>
</button>
</template>
<script lang="ts">
import { Component, Vue, Emit } from 'vue-property-decorator';
@Component
export default class Button extends Vue {
@Emit('click')
private onClick() {return}
}
</script>
Button.vueとHome.vueの3行目がイベントの受け取りの記述となっています。
内容をみてみると、書き方としては非常にシンプルです。
v-on:<イベント名>="<処理名>"例えばmouseover時のイベントに変更する場合はButton.vueの3行目を
v-on:mouseover="onClick"に変更することでmouseover時の処理へ変更することができます。
また、省略記法で「v-on:」を「@」にすることができます。
@<イベント名>="<処理名>"Button.vueの3行目は省略記法だと以下のようになります。
@click="onClick"イベントの受け取り方に関しては以上です。
独自イベントを発行し、受け取る
Button.vueのスクリプトタグ内の処理で「@Emit('click')」というのが出てきています。
このデコレータが付いているメソッドを呼び出すと@Emitに渡されたイベント名でイベントを親要素に対して発行します。
@Emit('<独自イベント名>')
private <メソッド名>(<イベント引数>) {}JavaScriptで記述している場合は、「$emit」を使用してイベントを発行できます。
クリックイベントではなく独自イベントを発行してみます。
今回は、Button.vueのクリックイベント処理を変更して「button-event」というイベントを発行します。
Button.vueの15行目を以下のように変更します。
@Emit('button-event')クリックしてもアラートが出なく(親要素の処理が実行されない)なりました。
親要素のHome.vueでは受け取るイベント名が「click」となっているので受け取ることができなくなりました。
では、Home.vueの方のイベント名も「button-event」に変更します。
Home.vueの3行目を以下のように書き換えます。
<Button @button-event="onClick">button1</Button>クリックすると今度はアラートが出るようになりました。