【学習記録⑥】$emitを用いて子コンポーネントから親コンポーネントへ値を渡す。

#はじめに
Vue.jsを最近勉強し始めたので学んだ文法などを備忘録としてメモしていこうと思います。
前回の学習記録記事では親コンポーネントから子コンポーネントへ値を渡す処理を書きましたが、今回の記事では逆に子コンポーネントから親コンポーネントへ値を渡す処理を書いていこうと思います。

##サンプルコード
前回まではそれぞれの挨拶ボタンをクリックすると「おはよう～！」「こんにちは～！」「こんばんは～！」等の挨拶アラートが出力されていましたが、今回はそれぞれの「メッセージ変更」ボタンを作成し、それをクリックすることで挨拶アラート文が変更されるものとします。

以下は「おはよう」アラートを返却するコンポーネントです。
$emitの第一引数に任意の名前を付け、第二引数へ親コンポーネントへ渡す値を記載します。

Morning.vue

<template>
  <div>
      <button @click="greeting">おはようボタン</button>
      <button @click="changeMessage">メッセージ変更</button>
  </div>
</template>

<script>
export default {
    props:["message"],
    methods:{
        greeting(){
            alert(this.message);
        },
        changeMessage(){
            this.$emit("change-morning-message", 'おはよう～！子から変更～');
        }
    }
};
</script>

親コンポーネントのApp.vueでは、先ほど$emitの第一引数でセットした値をテンプレートタグのmorningタブへセットします。
指定したmethodsの引数valueには$emitの第二引数でセットした値が入ってくるので、それをmorningMessageへ代入することでメッセージ文を変更することができます。

App.vue

<template>
  <div>
    <morning :message="morningMessage" @change-morning-message="changeMorningMessage"></morning>
    <afternoon :message="afternoonMessage"></afternoon>
    <evening :message="eveningMessage"></evening>
  </div>
</template>

<script>
import Morning from "./components/Morning.vue";
import Afternoon from "./components/Afternoon.vue";
import Evening from "./components/Evening.vue";

export default {
  data() {
    return {
      morningMessage: "おはよう～！",
      afternoonMessage: "こんにちは～！",
      eveningMessage: "こんばんは～！",
    };
  },
  components: {
    Morning,
    Afternoon,
    Evening,
  },
  methods: {
    changeMorningMessage(value) {
      this.morningMessage = value;
    }
  },
};
</script>

##最終的なApp.vueファイル
上記は「おはよう」部分のみですが、「こんにちは」「こんばんは」も同じように実装すると最終的に以下のようになります。

App.vue

<template>
  <div>
    <morning :message="morningMessage" @change-morning-message="changeMorningMessage"></morning>
    <afternoon :message="afternoonMessage" @change-afternoon-message="changeAfternoonMessage"></afternoon>
    <evening :message="eveningMessage" @change-evening-message="changeEveningMessage"></evening>
  </div>
</template>

<script>
import Morning from "./components/Morning.vue";
import Afternoon from "./components/Afternoon.vue";
import Evening from "./components/Evening.vue";

export default {
  data() {
    return {
      morningMessage: "おはよう～！",
      afternoonMessage: "こんにちは～！",
      eveningMessage: "こんばんは～！",
    };
  },
  components: {
    Morning,
    Afternoon,
    Evening,
  },
  methods: {
    changeMorningMessage(value) {
      this.morningMessage = value;
    },
    changeAfternoonMessage(value){
      this.afternoonMessage = value;
    },
    changeEveningMessage(value){
      this.eveningMessage = value;
    }
  },
};
</script>

##結果
npm run serveで起動します。
最初におはようボタンをクリックすると以下のように通常の挨拶文が出力されますが

メッセージ変更ボタンをクリック後、おはようボタンをクリックすると以下のように挨拶文が変更されていることが分かります。

#おわりに
親コンポーネントから値を渡すときに比べるとやや複雑でしたが何とかできました！
しっかり理解していこうと思います！