【Vue.js】子から親コンポーネントへデータを渡す方法

はじめに

コンポーネントを作っていたら、子コンポーネントから親コンポーネントにデータを渡したいって時ありますよね？

この記事では子から親コンポーネントへデータを渡す方法をご紹介します。

この記事の概要

$emitというメソッドを使いVue.jsで子から親コンポーネントへデータを渡す方法

$emitとは

簡単な説明ですが、子コンポーネントから親コンポーネントへの通信するために使用します。

構文：$emit(イベント名, [引数])

Vue.js 子から親コンポーネントへデータを渡す方法

今回は、子コンポーネントでinputにテキストを入力し、ボタンを押すと親コンポーネントにデータを渡す、という例でコードを書いていきます。

それでは、親コンポーネント(Parent.vue)と子コンポーネント(Child.vue)2つを用意して実装してみましょう。

Child.vue（子コンポーネント）

 
　<template>
 <div class="input_field">
 ①<inputtype="text" v-model="childText">
 ②<button type="button" @click="childTextSend()"></button>
 </div>
　</template>

　<script>
　export default{
 data:function(){
　　return{
 childText: null
 }
 },
 methods:{
 childTextSend(){
 ③this.$emit('catchText',this.childText)
 }
 }
 }
　</script>

①inputで入力したテキストをv-modelで双方向バインディング

②クリックしたらメソッドのchildTextSend()を実行

③catchTextというイベント名、①で入力したテキストを引数にとり、親データに送信

Parent.vue（親コンポーネント）

　<template>
　 <div id="parent">
 ①<Child @catchText="receiveText"></Child>
 ③<p>{{text}}</p>
　 </div>
　</template>
　<script>
　import Vue from 'vue'
　import VueRouter from 'vue-router'
　import Child from './components/Child.vue'

　export default {
 components:{
 Child
 },
　data: function () {
　　return {
 text: null
 }
 },
 methods:{
　　receiveText(message){
 ②this.text = message
 }
 },
 }
　</script>

①"@catchText"は子コンポーネントで指定した$emitのイベント名を記述し、receiveTextという関数を呼び出します。

②引数のmessageに子コンポーネントから受け取ったテキストが入ってるので、親コンポーネントのtextという名前のデータに格納します。

③親コンポーネントのtextに子コンポーネントから受け取ったテキストが入ったので、inputで入力したテキストが表示されます。

以上、子から親コンポーネントへデータを渡す方法でした！