Vue.jsで複数設置可能なモーダルを作る

Vue.jsで複数設置可能なモーダルを作りました。
モーダルのコンポーネント(Modal.vue)を作成して、ボタン（ModalBtn.vue）とモーダルコンテンツ（ModalContents）のペアをカプセル化することで複数設置できるようにしました。
jsで作る時と考え方が違うから慣れないとハマりますね。もっと得意になりたいです。

親→子へ値を渡すprops

親から子へdataを渡す時はprops

<template>
  <button class="btn modal">モーダル</button>
</template>

<script>
export default {
  props: ["modalFlg"],//受け取りたい値
  data() {
    return {
      childModalFlg: this.modalFlg,//受け取った値を変更したりする場合はそのまま変えると警告が出るので一度dataを定義したほうが良いと思う
    };
  },
};
</script>

<template>
  <div>
    <!--　渡したい値が変数の場合はv-bindを使用する  -->
    <ModalBtn :modalFlg="modalFlg" />
    <!-- 渡したい値が固定値の場合↓
    <ModalBtn modalFlg="data1" />
    -->
  </div>
</template>

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

export default {
  name: "Modal",
  components: {
    ModalBtn,
  },
  data() {
    return {
      modalFlg: false,//この値を子供に渡したい
    };
  },
};
</script>

子→親へ値を渡す$emit

子から親へdataを渡す時は$emit

<template>
  <button class="btn modal" @click="modalClick">モーダル</button>
</template>

<script>
export default {
  props: ["modalFlg"],
  data() {
    return {
      childModalFlg: this.modalFlg,
    };
  },
  methods: {
    modalClick() {
      this.childModalFlg = !this.modalFlg;
      //クリックされた時に値を書き換えて親に返したい
      //第一引数にイベント名、第二引数に送信するデータ
      this.$emit("modal-clicked", this.childModalFlg);
    },
  },
};
</script>

    <ModalContents
      @modal-clicked="modalFlg = $event"
      //@modal-clickedは子コンポーネントで作ったイベント名
      //受け取った値をmodalFlgにに入れて上書き
    />

参考サイト

propsと$emitでデータを引き渡す – Qiita ： https://qiita.com/d0ne1s/items/f88ecd6aaa90c7bbc5d4

親→子へ値を渡すprops

子→親へ値を渡す$emit

参考サイト

Related article