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

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

parent

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

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

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

child

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

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

// 山田たろう
// 山田はなこ