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

VueやNuxtを使っていて、子コンポーネントから親コンポーネントへ値を渡したい時の方法について記述します。
親→子はpropsを使えばいいのですが、子→親は少しトリッキーなやり方になりますので。

結論

$emit(eventName,[...args])

を使います
$emitについてはこちら

サンプル

サンプル画面

サンプルコード

parent.vue

<template>
    <div>
        <h1>親</h1>
        コメント：{{ comment }}
        <hr>
        <h2>子</h2>
        //@childの「child」は子コンポーネントの第一引数で指定されたもの
        <child :comment="comment" @child="changeComment"></child>
    </div>
</template>
<script>
import child from '~/components/child.vue'

export default {
    components: {
        child
    },
    data() {
        return {
            comment: "テスト"
        }
    },
    methods: {
        //$emitの第二引数の値はここで受け取っている
        changeComment(childComment) {
            this.comment = childComment
        }
    }
}
</script>

components/child.vue

<template>
    <div>
        <input v-model="childComment" type="text">
        <input type="button" value="親コメントを変更する" @click="change">
    </div>
</template>
<script>
export default {
    data() {
        return{
            childComment:''
        }
    },
    methods: {
        change() {
            //$emitの第一引数でイベントの名前を指定、第二引数で値を渡す
            this.$emit('child', this.childComment)
        }
    }
}
</script>

解説

子コンポーネントの$emitでイベント名(child)を指定して、第二引数に親コンポーネントに渡したい値を指定します。
親コンポーネント側では指定されたイベント（child）で動くmethodであるchangeCommentで第二引数で指定された値を受け取ります。

最後に

子コンポーネントから親に値を渡して親の値を変更したいといった場面も意外にあるかと思います。そんな時にこの記事がお役に立てれば幸いです。