勉強履歴(と雑記)

プログラミング初心者のメモ書きです

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>

以上です。 あくまで自分用のメモではありますが、他の人が見てもわかりやすいブログに改善していきたいですね。