vue.jsで子から親コンポーネントにデータを渡す方法

JavaScript

こんにちは。

vue.jsで、子コンポーネントから親コンポーネントにデータを渡す方法があれば便利ですよね。
調べてみると、$emitというメソッドを使うと簡単にできるようなので、今回はその方法を紹介します。

スポンサーリンク

vue.jsで子から親コンポーネントにデータを渡す方法

まずは、parent.vue(親コンポーネント)とchild.vue(子コンポーネント)という2つのコンポーネントを用意します。

コードは以下のように実装します。

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・・・・・送られてきたデータをアラート表示します。

以上で簡単に子コンポーネントのデータを親コンポーネントで受け取ることができました。

タイトルとURLをコピーしました