はじめに
「子コンポーネント内でリストレンダリングしているボタン」
↕
「親コンポーネントで定義したイベント」
を動的に対応させたかったのでサンプルコードを残します。
※コピペで挙動を確認できます。
環境
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>
おわりに
最後まで読んで頂きありがとうございました
どなたかの参考になれば幸いです