vue.js

Vue.js $emitで発生したイベントに親と子の引数を渡す

子からの引数だけでなく、プラスして親の引数も欲しい時。


parent

<template>

<div>
<div v-for="(item, index) in items" :key="index">
<child @child-event="method($event, index)">
{{ item.name }}
</child>
</div>
</div>
</template>

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

export default {
components: {
Child,
},
data() {
return {
items: [
{ name: 'たろう' },
{ name: 'はなこ' },
],
}
},
methods: {
method(child, index) {
console.log(index + ':' + child);
},
},
}
</script>



child

<template>

<button @click="event">
<slot></slot>
</button>
</template>

<script>
export default {
methods: {
event() {
this.$emit('child-event', 'trueだよ');
},
},
}
</script>


// 0:trueだよ

// 1:trueだよ