【Nuxt.js】$emit基礎編：親子間の通信をスムーズにしよう

前置き

今回はコンポーネントの
親子間でのやりとりに使われる$emit！

propsとの違いはprops応用をご覧ください。

【Nuxt.js】props応用編：コンポーネントに自由にデータを渡そう

$emitって？メリットは？

子から親に通信をすることができます🌟
通常は、親から子しかできず、
子から親の通信はできません❌
が、$emitならできるというわけです💡

分かりやすい例で言うと…モーダルウィンドウ！
親でボタンを押すと
子コンポーネントのモーダルウィンドウが表示、
子のモーダルウィンドウで閉じるボタンを押せば、
親で検知してくれて非表示にしてくれます。
emitがなければモーダルウィンドウは閉じることができないわけです。

いきなりモーダルウィンドウでやると
ハードルがあがるため、
今回はalertを使って仕組みを解説します！

使い方

step
1まずは$emitを使わずに子でアラートを表示

表示

コード

)

<template>
 <div class="component">
   <button v-on:click="alert">emitを使おう！</button>
 </div>
</template>

<script>
export default {
 methods: {
   alert () {
     alert('Hello Nuxt.js!')
   }
 },
}
</script>

<style lang="scss">
</style>

<button v-on:click="alert">emitを使おう！</button>

</div>

</template>

export default {

methods: {

alert () {

alert('Hello Nuxt.js!')

}

</script>

</style>

)

<template>
 <div class="container">
   <Component />
 </div>
</template>

<script>
import Component from '~/components/Component.vue'

export default {
 components: {
   Component
 },
}
</script>

<style lang="scss">
</style>

</div>

</template>

import Component from '~/components/Component.vue'

export default {

components: {

Component

}

</script>

</style>

step
2$emitを使う

今度は子でボタンを押すと
親でalertが表示されるようにしましょう！
子のメソッドalert関数をカスタムイベントとして名付けます。

<template>
 <div class="component">
   <button v-on:click="alert">emitを使おう！</button>
 </div>
</template>

<script>
export default {
 methods: {
   alert () {
     // alert('Hello Nuxt.js!')
     this.$emit('componentAlert')
   }
 },
}
</script>

<style lang="scss">
</style>

<button v-on:click="alert">emitを使おう！</button>

</div>

</template>

export default {

methods: {

alert () {

// alert('Hello Nuxt.js!')

this.$emit('componentAlert')

}

</script>

</style>

カスタムイベント名はキャメルケースで書きましょう！
親でcomponentAlertイベントを受け取ります。

<template>
 <div class="container">
   <Component v-on:componentAlert="Alert" />
 </div>
</template>

<script>
import Component from '~/components/Component.vue'

export default {
 components: {
   Component
 },
 methods: {
   Alert:function () {
     alert('Hello Nuxt.js!')
   }
 },
}
</script>

<style lang="scss">
</style>

</div>

</template>

import Component from '~/components/Component.vue'

export default {

components: {

Component

methods: {

Alert:function () {

alert('Hello Nuxt.js!')

}

</script>

</style>

よく分からん！！！と思った方
関係性を線で繋ぎました😀

子でボタンをクリックしたら
componentAlertというイベントが発生し、それを親に渡します。
そのイベントを親ではAlertという関数名にし、そちらを実行しています。
関数名の先頭は小文字で良いのですが
子と親の関数名を区別するために、あえて大文字にしています。

もっと分かりやすく文面で表すと…
v-onは〜した時、といった意味をもつため
子）
clickした時、alert関数を実行します。
alert関数で起こる処理を$emitを使って親に渡します。
処理の名前をcomponentAlertとして親に渡します。
親）
componentAlertという処理が起きた時、
親ではそれをAlertと名付け、Alert関数を実行します。

省略した書き方

今の例で、
・子でわざわざmethodsでalertを作る必要があるの？
・親にイベント名だけ渡せればよくない？
と思った方！
はい、その通りです👏
解説のために細かく設定しました。
実際、子コンポーネントはこれだけで済みます。

<template>
 <div class="component">
   <button v-on:click="$emit('componentAlert')">emitを使おう！</button>
 </div>
</template>

<script>
export default {
}
</script>

<style lang="scss">
</style>

<button v-on:click="$emit('componentAlert')">emitを使おう！</button>

</div>

</template>

export default {

}

</script>

</style>

$emitで渡すのはイベント名なので、シングルクォーテーションで囲みます。
これでシンプルに、簡単にイベントを渡せます😄

これで基礎はバッチリですね🎉
難しいと言われているpropsとemitですが、
基礎は意外とシンプルで簡単なんです！！

次回は$emit応用編をやります。
冒頭に書いたモーダルウィンドウをやります。
下記3つの知識があればできます！
意外と簡単なんです♪
・$emit
・@click
・v-if