Vue.js学習メモ(子から親への値受け渡し)
昨日の続きです。
モーダルから新しくタスクを追加する場合を考えます。 子コンポーネント(TaskCreateModal.vue)→親コンポーネント(index.vue) 引き渡すデータ:タスクの情報(タイトル/title、詳細/description)
実装例
index.vue
<template> <transition name="fade"> <TaskCreateModal v-if="isVisibleTaskCreateModal" @close-modal="handleCloseTaskCreateModal" @create-task="handleCreateTask" /> </transition> </template> <script> import TaskCreateModal from "./components/TaskDetailModal" export default { name: "TaskIndex", components: { TaskCreateModal }, methods: { handleCreateTask(task) { // 略 } }
TaskCreateModal.vue
<template> <div class="modal-body"> <div class="form-group"> <label for="title">タイトル</label> <input type="text" class="form-control" id="title" v-model="task.title"> </div> <div class="form-group"> <label for="description">説明文</label> <textarea rows="5" class="form-control" id="description" v-model="task.description"></textarea> </div> <div class="d-flex justify-content-between"> <button @click="handleCreateTask" class="btn btn-success">追加</button> </div> </div> </template> <script> export default { name: "TaskCreateModal", methods: { handleCreateTask() { this.$emit('create-task', this.task) }, }, } </script>
1)子コンポーネントをインポートし、componentsプロパティに登録(親から子のときと同じ)
import TaskCreateModal from "./components/TaskCreateModal" export default { name: "TaskIndex", components: { TaskCreateModal },
2)v-modelディレクティブを使って、送信するデータを設定 タイトルに入力した値がtask.titleに、説明文に入力した値がtask.descriptionに代入される
<div class="form-group"> <label for="title">タイトル</label> <input type="text" class="form-control" id="title" v-model="task.title"> </div> <div class="form-group"> <label for="description">説明文</label> <textarea rows="5" class="form-control" id="description" v-model="task.description"></textarea> </div>
3)クリックイベントの設定 @click="処理名"とタグに記載することで、クリックした時にmethodsプロパティで定義した処理(今回はhandleCreateTask)が実行される
<template> <div class="d-flex justify-content-between"> <button @click="handleCreateTask" class="btn btn-success">追加</button> </div> </template> <script> export default { methods: { handleCreateTask() { this.$emit('create-task', this.task) } } </script>
4)子コンポーネントから親へのデータ送信 this.$emit('イベント名', 値)と記載することで、第二引数で値を渡しつつ親のイベントを引き起こす(今回は'create-task')
<script> export default { methods: { handleCreateTask() { this.$emit('create-task', this.task) } } </script>
5)親コンポーネントでデータを受けとり(@create-task)、handleCreateTaskが実行される
<template> <transition name="fade"> <TaskCreateModal v-if="isVisibleTaskCreateModal" @close-modal="handleCloseTaskCreateModal" @create-task="handleCreateTask" /> </transition> </template> <script> export default { methods: { handleCreateTask(task) { // 略 } } </script>
以上です。 あくまで自分用のメモではありますが、他の人が見てもわかりやすいブログに改善していきたいですね。