【Vue.js】$emitの使い方

$emitとは

$emitは、子コンポーネントでボタンが押されたり、テキストボックスの変更などが発生したときに親コンポーネントに伝えることができる。
また、子コンポーネントから親コンポーネントにデータを渡したいときにも使われる。
子コンポーネントがカスタムイベントを作成して、親コンポーネントに対してイベントを発生させる。その後、親コンポーネントがイベントを検知して処理を実行する。
$emitの基本的な書き方は以下となる。

this.$emit(<イベント名>,<データ>):

サンプル

$emitを使って子コンポーネントから親コンポーネントにデータを渡す簡単なサンプルをメモしておく。

###子コンポーネント

Sample.vue

<template>
	<button @click="onClickButton">ボタン</button>
</template>

<script>
export default {
	name: "sample",
	data() {
		return {
			message: "Hello!!",
		};
	},
	methods: {
		onClickButton() {
			this.$emit("onClick", this.message);
		},
	},
};
</script>

###親コンポーネント
子コンポーネントのイベントを監視する場合は、v-on:<イベント名>または@<イベント名>で指定する。
そして、子コンポーネントの**$emit**で指定された値は、イベントで紐づけたメソッドに引数として渡される。

App.vue

<template>
	<div>
		<sample @onClick="getMessage" />
		{{ message }}
	</div>
</template>

<script>
import Sample from "./components/Sample.vue";

export default {
	name: "App",
	components: {
		Sample,
	},
	data() {
		return {
			message: "",
		};
	},
	methods: {
		getMessage(value) {
			this.message = value;
		},
	},
};
</script>