Vue.jsのボタンコンポーネントで個別の処理をする方法

Vue.jsでスタイルは同じで処理の内容だけ違うボタンを実装したくてボタンコンポーネントを作成しました。

Vue
1//App.vue
2<template>
3<Button buttonName="a" @click="A" />
4<Button buttonName="b" @click="B" />
5</template>
6
7<script>
8export default {
9  name: "Button",
10  props: {
11    buttonName: {
12      type: String,
13      default: "null",
14    },
15  },
16  methods: {
17    A: function () {
18      //省略
19    },
20    B: function () {
21      //省略
22    },
23  },
24};
25</script>

Vue
1//Button.vue
2<template>
3  <button>
4    <span>{{ buttonName }}</span>
5  </button>
6</template>
7<script>
8export default {
9  name: "Button",
10  props: {
11    buttonName: {
12      type: String,
13      default: "null",
14    },
15  },
16};
17</script>

このような方法で試してみたのですが、ボタンを押しても反応しません。
v-onで処理する関数は{{ buttonName }}のようにコンポーネント側で変数として定義できるのでしょうか？

zushi0905

2020/12/16 09:41

Buttonコンポーネントにclickイベントを呼ぶemitが存在していなければ普通に動くような気がしますね。もしコンポーネント内のどこかのemitで使用されていているのならば@click.nativeで呼べばいけます

行動規範の内容に同意します

回答1件

ベストアンサー

子コンポーネントからのイベントをハンドルするためには、子コンポーネントから$emitでイベントを定義する必要があります。

vue
1//Button.vue
2<template>
3  <button @click="onClick"> // ボタンが押されたときに子コンポーネント自身が持っているメソッドを呼び出す
4    <span>{{ buttonName }}</span>
5  </button>
6</template>
7<script>
8export default {
9  name: "Button",
10  props: {
11    buttonName: {
12      type: String,
13      default: "null",
14    },
15  },
16  methods: {
17    onClick(event) {
18      this.$emit('click', event) // このメソッド内で$emitでイベントを定義する第一引数にイベント名、以降の引数に追加の引数を渡す
19    }
20};
21</script>