こんにちは。
vue.jsで、子コンポーネントから親コンポーネントにデータを渡す方法があれば便利ですよね。
調べてみると、$emitというメソッドを使うと簡単にできるようなので、今回はその方法を紹介します。
vue.jsで子から親コンポーネントにデータを渡す方法
まずは、parent.vue（親コンポーネント）とchild.vue（子コンポーネント）という２つのコンポーネントを用意します。
コードは以下のように実装します。
child.vue
<template>
<button @click="sendMessage">親にデータを渡すボタン</button>
</template>
<script>
export default{
data(){
return: {
message: 'welcome'
}
},
mounted(){},
methods: {
sendMessage(){
this.$emit('catchMessage', this.message);
}
}
}
</script>
child.vueでは、「ボタンがクリックされたら親コンポーネントにデータを渡す」という処理の流れを作ってみます。
@click=”sendMessage”・・・・sendMessageメソッドを実行します。
sendMessage・・・・・・・・$emitを使って、親コンポーネントにイベントとデータを渡します。
this.$emit()・・・・・・・・・・第一引数の「catchMessage」は親コンポーネントで受け取るためのイベント名です。自由な名前を決められます。第二引数は、親コンポーネントに渡すデータです。今回は「melcome」という文字列が入ったthis.messageを指定します。
parent.vue
<template>
<div>
<child @catchMessage="displayMessage"></child>
</div>
</template>
<script>
import child from 'child.vue'
export default{
components: {
child
},
data(){
return: {}
},
mounted(){},
methods: {
displayMessage(message){
alert(message);
}
}
}
</script>
親コンポーネントでは、子コンポーネントから渡ってきたデータをキャッチし、アラートを出す仕組みです。
@catchMessage=”displayMessage”・・・子コンポーネントで指定したイベント名、「catchMessage」が作動したら、親コンポーネント内のdisplayMessageメソッドを発火させます。
displayMessage・・・・・送られてきたデータをアラート表示します。
以上で簡単に子コンポーネントのデータを親コンポーネントで受け取ることができました。
