私自身、データの受け渡しは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でつけた第一引数はケバブケースで統一