👩‍💻

Vue.js3でTODOリストを実装②

に公開
Vue 3
備忘録
勉強用
idea

勉強の備忘録として記事を書いてます。
Vue.jsでTODOリストを開発していきます。Geminiでコード生成して、不明点や疑問点はchatGPTを頼り、補足してもらうような形で開発を進めました。
アウトプットして自分の中の知識を固めたいという思いで書いていますが、誰かのために役に立てれば嬉しいです。

今回は「タスクを追加する入力フォーム」である子コンポーネントTodoInput.vueのコードをまとめていきます。

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

App.vue
<template>
<TodoInput
    @add-todo="addTodo" />
</template>

🐤 子コンポーネント(TodoInput.vue)

TodoInput.vue
<script setup>
import { ref } from 'vue';

const emit = defineEmits(['add-todo']);
const newTodoTitle = ref('');
const addTodo = () => {
    emit('add-todo', newTodoTitle.value.trim());
    newTodoTitle.value = '';
</script>

const emit = defineEmits(['add-todo']);

親コンポーネントから定義されている@add-todoイベントを子コンポーネント側から親にイベントを送るためにemitを定義する。defineEmits(['']);は、親に送るイベント(信号)を宣言するための関数。子コンポーネント側では値の書き換えはできないため、必ず親へ送る必要がある。

const newTodoTitle = ref('');

入力フォームの内容をリアクティブに保持するための変数。後述
するが<templete>のinput内にv-modelと紐づけるので入力のたびにnewTodoTitle.valueが更新される。

const addTodo = () => {};
emit('add-todo', newTodoTitle.value.trim());
newTodoTitle.value = '';

フォームの送信時に呼ばれる関数。こちらも後述するが、<form>内に@submit.preventに呼ばれる関数になるため実行したい処理を{}内に記述していく。

emit('add-todo', newTodoTitle.value.trim());：add-todoイベントを親へ送る。イベントを送るとき(箱)にnewTodoTitle.value(中身)をいれて一緒に送る。送信後には入力欄をリセットするためにnewTodoTitle.value = '';で空にする。

TodoInput.vue
<template>
    <form @submit.prevent="addTodo">
        <input
        v-model="newTodoTitle"
        type="text"
        placeholder="ここにタスクを入力"
        required　/>
        <button type="submit">追加</button>
    </form>
</template>

@submit.prevent="addTodo"：<form>に送信イベントをつけると、<form>全体を扱えるためEnterでもclickでも送信できる。
v-on:submit="addTodo"の省略記法@submit="addTodo"でaddTodoを実行。.preventでページリロードを防ぐ。

v-model="newTodoTitle"：v-modelは双方向バインディングのため入力した内容がnewTodoTitleにリアルタイムで反映される。逆にnewTodoTitleを変更すればフォームの表示も更新される。

🐔 親子連携のまとめ 🐤

  1. 子コンポーネントでフォームを送信して子のaddTodo関数を実行
  2. emitでadd-todoイベントを親へ送信
  3. 親が@add-todo信号を受け取って親のaddTodo()を実行
  4. 新しいタスクをリストに追加！

Discussion