1）子コンポーネント内に、親に向けて呼びかける処理を書く
子コンポーネント child.vue 内に
親に書かれた処理を実行 buttonがあるとする。
このボタンは、
押したら、子コンポーネント内の methods: の中に書いてる hogehoge メソッドを呼び出す。
<button @click="hogehoge">親に書かれた処理を実行</button>
呼び出した hogehoge メソッドの中に、
親に向けて「処理を実行して！」と呼びかけるために
$emitを使ってまずは「呼びかけ」る処理を書く。（イメージ）
親コンポーネント内に配置した、自分（child.vue）が
「 〇〇 と呼ばれたら、親コンポーネント内でメソッドを呼び出す」という取り決めをする。
$emitを使って〇〇 にあたる部分を決める。
以下は child.vue 内のソースコード。
<template>
<button @click="hogehoge">親に書かれた処理を実行</button>
</template>
<script>
methods:{
hogehoge: function(){
this.$emit('fugafuga');
/*
親コンポーネント内に配置した子コンポーネント（child.vue）に
「@fugafuga」という形で「呼ばれたことを感知する窓口的なもの」をつけることで、
ここからの呼び出しを感知することができるようになる。
*/
}
}
</script>
今回の記事で一番言いたいこと
今回は「ボタンを押したら」というケースで書いてますが
大事なのは hogehoge メソッドの中に書いてある this.$emit('fugafuga'); の部分。
クリックしたら、という起点じゃなくても構いません。
何かしらのメソッドの中にemitが書いてあればそれが親コンポーネントに向かって呼びかけます。
2）親コンポーネントで呼び出しを感知する→行いたい処理を実行する
今度は親コンポーネント内で
「あ、俺今呼ばれたな〜。はいはい、実行しますよ。」
となる部分を書いていく。
<template>
<!-- 子コンポーネントを配置してるソースに対して
先ほど決めた名前「@fugafuga」を書き、呼ばれたことを感知できるようにする。
「@fugafuga」が、子コンポーネント内の$emitから呼ばれたことを感知したら、
「honya」メソッドを実行する。 -->
<ChildComponent @fugafuga="honya" />
</template>
<script>
import ChildComponent from '~/components/child.vue'
methods:{
honya: function(){
console.log('子コンポーネントから親コンポーネント内のメソッドを実行できたよ');
}
}
</script>
これでできるはず。
自分の中のイメージで書いちゃってるので、もし違ったらすみません。
正確なイメージについて教えていただけたら嬉しいです。m(_ _)m
追記：
コメントいただきました🙏ありがとうございます。
そちらについてもあわせて読んでいただけたら理解が深まると思います。