Vue.js propsとemitのデータの受け渡し

私自身、データの受け渡しはvuexさえ覚えてしまえば大丈夫だろうと思っていましたが、とんだ勘違いをしていることに気づきました。vuexはグローバル変数なのでどこにでもアクセスできてしまうので、関連する処理を把握しておく必要があります。個人ならまだしも、チーム開発になってエラーが起きてしまったらプロジェクトが偉大な分、解決するのに一苦労です。そこで、確実にここのコンポーネントでしか値を渡さないということであればpropsやemitにしておくべきだと思いました。
propsとemitの勉強を疎かにしていたので、あまりわかってなかったので復習がてら勉強しました。

props&emitの使い方（例）

components/LikeNumber.vue

<template>
  <div>
    <p>いいね(例){{ halfNumber }}</p>
    <button @click="increment">+1</button>
  </div>
</template>
<script>
export default {
  //   props: ["totalNumber"],//プロパティ名はなんでもいい
  //propsでオブジェクトと配列を渡すときは参照渡しになる
  props: {
    totalNumber: {
      type: Number, //keyに名前、valueに型の種類
      required: true, //必ずこの属性（totalNumber）が必要かどうか
      //何も指定しないと警告が表示される
    },
  },
  computed: {
    halfNumber() {
      return this.totalNumber / 2;
    },
  },
  methods: {
    increment() {
      //データの送り口
      this.$emit("my-click", this.totalNumber + 1);
      //第１引数はイベントの名前（なんでもいい）、第２引数に渡すデータ自身を入れる

      //       this.totalNumber + 1;
      // これでは親の値は変わらない
    },
  },
};
</script>

pages/board.vue

<template>
  <v-container class="todo">
    <v-form ref="form">
      <v-row>
        <v-col cols="12" md="12">
          <TodoDetail></TodoDetail>
        </v-col>
      </v-row>
    </v-form>
    <h2>{{ number }}</h2>
    <!-- <LikeNumber :total-number="number" @my-click="incrementNumber"></LikeNumber> -->
    <LikeNumber :total-number="number" @my-click="number = $event"></LikeNumber>
    <!-- データの送り口 -->
    <TodoList name="TODO" :todolist="todolist"></TodoList>
    <!-- nameもpropsで渡ってきている　TodoList.vueからpropsで渡ってきたtodolistとboard.vueのtodolistをbindさせる  -->
    <TodoList name="DONE" :todolist="donelist"></TodoList>
    <!-- nameもpropsで渡ってきている　TodoList.vueからpropsで渡ってきたtodolistとboard.vueのdonelistをbindさせる  -->
    <v-btn class="mx-1 my-2 px-3 py-2 red" @click="logout"> LOGOUT </v-btn>
  </v-container>
</template>

<script>
import TodoList from "@/components/TodoList.vue";
import TodoDetail from "@/components/TodoDetail.vue";
import LikeNumber from "@/components/LikeNumber.vue";
export default {
  data() {
    return {
      number: 14, //親コンポーネントのnumber
    };
  },
  components: {
    TodoList,
    TodoDetail,
    LikeNumber,
  },
  computed: {
    todolist() {
      return this.$store.getters["sample/orderdTodos"].filter((el) => {
        return el.done === false;
      }, this);
    },
    donelist() {
      return this.$store.getters["sample/orderdTodos"].filter((el) => {
        return el.done === true;
      }, this);
    },
  },

  methods: {
     incrementNumber(value) {
       this.number = value; //このvalueは子コンポーネントのthis.totalNumber + 1 を受け取った
     },
  },
};
</script>

<style scoped>
.status.done {
  text-decoration: line-through;
}
</style>

この場合LikeNumber.vueが子コンポーネントにあたり、
board.vueが親コンポーネントにあたります。

大事なことのまとめ

1.emitは渡しているけど変えてるわけではない
2.親のイベントを発火させる起動スイッチ、子コンポーネントの中で親コンポーネントのメソッドを好きなタイミングで発火できる
3.好きにイベント名を作れる
4.子のコンポーネントに送り口、親に受け口をおく
5.$eventが受け取れるデータを示す
6.親が持ってるnumberは子供から変えてるわけではない、親自身で変えている
7.親は子供のデータに依存して変わるものはない
8.子供は親のデータを勝手に変えれない
9.親が子供のデータに依存して変えれるデータを持っていない
10.親から子のデータの受け渡しはprops、子供から親へのデータの受け渡しはemitで行う
11.命名規則
$emitでつけた第一引数はケバブケースで統一