【メモ】Vueコンポーネントで再帰的に$emitしたいときの引数

Vueコンポーネントの中で自身のコンポーネントを呼び出してツリー表示をしたいときがあると思います。

今回やりたかったのは以下のこと。

---

1) 初期表示で最上位の階層(親のいない階層)を表示

2) 子要素があれば hasChild 属性が true。「＋」ボタンを表示する。

3)「＋」ボタンを押したら、 loadChildren　メソッドを $emit 。自身の children 属性に子要素リストを読み込んで表示する。

4) 2-4を繰り返す。

---

というもの。再帰のところで $emit の引数に何を渡すんだろう？とひるみましたが、 $event を渡せばよいんだそうです。

<!-- Tree.vue -->
<template>
  <div class="tree">
    <ul v-for="item in items" :key="item.id">
      <li>
        {{ item.name }}
        <Tree
          v-if="item.children !== null" // 子要素があるときだけ機能する
          :items="item.children"
          @loadChildren="$emit('loadChildren', $event)"  // 引数に $event を指定する
        />
        <a v-else-if="item.hasChild" @click="$emit('loadChildren', item)">  // 引数に item を指定する
          +
        </a>
      </li>
    </ul>
  </div>
</template>

ここに例がありました。

vuejs.org