search
LoginSignup
20
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

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>

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
20
Help us understand the problem. What are the problem?