【Vue.js】孫コンポーネントから親コンポーネントにデータを渡す

はじめに

孫コンポーネントから親コンポーネントにデータを渡す方法について

データを渡す方法

孫コンポーネントから親コンポーネントにデータを渡すには、孫コンポーネントと子コンポーネントで$emitメソッドを使う方法でもできますが、

子コンポーネントで$listenersメソッドを使うことでもっとわかりやすくなります。

孫コンポーネント

<template>
  <div :id="'task-' + task.id"
       class="bg-white border shadow-sm rounded my-2 p-4 d-flex align-items-center"
       @click="handleShowTaskDetailModal(task)">
    <span>{{ task.title }}</span>
  </div>
</template>

<script>
export default {
  name: 'TaskItem',
  props: {
    task: {
      type: Object,
      required: true
    }
  },

// $emit を使って子コンポーネントのメソッドを呼びデータを渡す
  methods: {
    handleShowTaskDetailModal(task) {
      this.$emit('handleShowTaskDetailModal', task)
    }
  }
}
</script>

子コンポーネント

<template>
  <div class="col-12 col-lg-4">
    <div :id="taskListId" class="bg-light rounded shadow m-3 p-3">
      <slot name="header">タスク区分</slot>
      <template v-for="task in tasks">
        <TaskItem :key="task.id" :task="task" 
                  @handleShowTaskDetailModal="$listeners['handleShowTaskDetailModal']" />
                  // $listenersを使って孫コンポーネントのデータを親コンポーネントに渡す
      </template>
    </div>
  </div>
</template>

<script>
import TaskItem from './TaskItem'

export default {
  components: {
    TaskItem
  },
  name: "TaskList"

親コンポーネント

      <TaskList :tasks="todoTasks"
                taskListId="todo-list"
                @handleShowTaskDetailModal="handleShowTaskDetailModal">
               // このイベントが発火  
<template>
......
......
        <template v-slot:header>
          <div class="h4">TODO</div>
        </template>
      </TaskList>
.......
.......
</template>

<script>
.......
import TaskList from './components/TaskList'

export default {
  components: {
    TaskList
  },

//  上記のイベントが発火して下記メソッドが実行される
methods: {
    handleShowTaskDetailModal(task) {
      this.isVisibleTaskDetailModal = true;
      this.taskDetail = task;
    },
.........
.........
</script>