はじめに

「子コンポーネント内でリストレンダリングしているボタン」
↕
「親コンポーネントで定義したイベント」

を動的に対応させたかったのでサンプルコードを残します。

※コピペで挙動を確認できます。

環境

OS: macOS Catalina 10.15.3
Vue: 2.6.10

結論：出力結果

このそれぞれのボタンに別々のメソッドが紐付いています。

子コンポーネント

Child.vue

<template>
  <div id="child">
    <h1>{{ title }}</h1>
    <!-- 親コンポーネントのbtns内のオブジェクト数に応じてbuttonの数を変更する -->
    <div v-for="btn in btns" :key="btn.id">
      <!-- $emitにて、親コンポーネントでv-onに指定する名前、第２引数には親コンポーネントに渡したい値をセット -->
      <button @click="$emit('click-button', btn.action)">{{ btn.name }}</button>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Child',
    props: {
      title: String, //型を指定しておくと予定外の型になった場合エラーが出て気付ける
      btns: Array,
    }
  }
</script>

親コンポーネント

Parent.vue

<template>
  <div id="parent">
    <!-- 子コンポーネントからpropsで渡した属性を親コンポーネントで指定 -->
    <Child
      title="Chile to Parent"
      :btns='btns'
      @click-button="toggleClick"
    ></Child>
  </div>
</template>

<script>
  import Child from './Child.vue'

  export default {
    name: 'Parent',
    components: {
      Child,
    },
    data() {
      return {
        //表示したい数だけbtnsにオブジェクトを記載
        btns: [
          {id: 1, name: 'run console.log', action: 'consoleLog'},
          {id: 2, name: 'run alert', action: 'alert'},
          {id: 3, name: 'run console.error', action: 'error'}
        ]
      }
    },
    methods: {
      //どのメソッドを発火するかを動的に変更するために定義
      toggleClick(action) {
        if (action === "consoleLog") {
          this.consoleLog() //thisをつけることで親コンポーネントで定義済のメソッドと紐づく
        } else if (action === "alert") {
          this.alert()
        } else if (action === "error") {
          this.error()
        }
      },

      //実際に発火するメソッド
      consoleLog() {
        console.log('one!')
      },
      alert() {
        alert('two!')
      },
      error() {
        console.error('three!')
      }
    }
  }
</script>

おわりに

最後まで読んで頂きありがとうございました

どなたかの参考になれば幸いです

参考にさせて頂いたサイト（いつもありがとうございます）