コンポーネントのオプションの一つであるmethodsについて詳しくみていきます。
使い方を確認後、実際にボタンを押すとアラートを表示するプログラムを書いていきます。
コンポーネントにおけるメソッドとは
コンポーネント内のテンプレートやスクリプトで使用することのできる処理です。
算出プロパティ(computed)との違いは、算出プロパティはその中で使用している値に変更がない限り再計算されません。
メソッドの場合は、実行されるたびに再計算します。
例としては、クリックイベント時などの処理はメソッド、文字出力やレイアウトなどの処理は算出プロパティを使用します。
メソッドの使用方法
メソッドの使用方法は以下の通りです。
JavaScript
JavaScriptでは、methodsにメソッドの連想配列を渡します。
<script>
export default {
methods: {
<メソッド名>(<引数...>) {
<処理内容>
},
<メソッド名>(<引数...>) {
<処理内容>
},
・,
・,
・
}
}
</script>
TypeScript
TypeScriptの場合は、クラスメソッドを書けばそれがコンポーネント内で使用することのできるメソッドになります。
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component
export default class <クラス名> extends Vue {
private <メソッド名>(<引数...>) {
<処理内容>
}
private <メソッド名>(<引数...>) {
<処理内容>
}
}
</script>
メソッドを使用してみる
TypeScriptにて実際に使用してみます。
Home.vueを以下のように変更します。
<template>
<div class="home">
<button @click="onClick">アラートが出ます</button>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component
export default class Home extends Vue {
private onClick() {
alert('クリックされました');
}
}
</script>
TypeScriptでは、クラスメソッドとして定義すればいいので、12行目で「onClick」というメソッドを定義しました。
処理はアラートを出すだけです。
3行目でクリックイベント時にonClickメソッドを呼ぶようにしています。
実際に動かしてみるとボタンをクリックするとアラートが出ます。
クラスに定義したメソッドが使用できてます。
Vue APIまとめ
その他のVue(Nuxt)の記事は以下のページにまとめています。
【Vue.js】API一覧