子コンポーネントから親コンポーネントへのデータの受け渡し〜$emitを使って〜

Vueでは、コンポーネント間の関係はした図のように、ツリー状になっており、上から下へのデータの受け渡しは、propを使って行っていました。

公式ドキュメントを参照

ツリーの下から上にデータを渡すときは、少し大変なようで、親コンポーネントが子コンポーネントのイベントを購読することによって実現するようです。「購読」って何だ。って公式ドキュメントを読みながらした僕の理解はこんな感じ。

$emit()でカスタムイベントを定義できると行っておきながら、何の処理もしていないじゃないかといったツッコミどころは多いですが、とりあえずの理解のために概念図を書いてみました。

パワポとか使ってもっと綺麗な図にできたら良かったのですが、そこまでの気力はありませんでした。

ソースコード

カスタムイベントを作って遊ぶために使ったソースコードです。

親コンポーネント(App.vue)

<template>
  <div id="app">
    <BaseCheckbox
      v-model="Checked"
    ></BaseCheckbox>
    <h1>{{Checked}}</h1>
  </div>
</template>

<script>
import BaseCheckbox from "./components/BaseCheckbox";

export default {
  name: "app",
  props: {
    Checked: {
      type: Boolean,
      default: true
    }
  },
  components: {
    BaseCheckbox,
  },
};

子コンポーネント(Checkbox.vue)

<template>
  <div>
    <input
      type="checkbox"
      v-on:click="$emit('CheckboxChanged', $event.target.checked)"
    >
    <h1>{{checked}}</h1>
  </div>
</template>

<script>
export default {
  model: {
    prop: "checked",
    event: "CheckboxChanged"
  },
  props: {
    checked: Boolean,
    testText: String
  }
};
</script>

$emitを使ってみて

処理自体はとても単純なのですが、定義しなければいけないプロパティ名、イベント名などが多く、親コンポーネントと子コンポーネントを行き来していると訳が分からなくなって、頭がこんがらがってしまうという印象でした。
これは何度も使って慣れるしかないかも

Leave a Reply

Your email address will not be published. Required fields are marked *

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)