Vueにおけるイベントの発行

既にご存知の通り、データは親コンポーネントから子コンポーネントへと流れます。ではここで、子コンポーネントが親とどのように通信するかを見てみましょう。これは、イベントの発行を使用して行われます。実際に見ていきましょう。

親コンポーネントに次のようなメソッドがあるとします：

methods: {
	func() {
		alert('xxx');
	}
}

このメソッドをパラメータとして子コンポーネントに渡しましょう：

<template>
	<User @show="func" />
</template>

emits設定で発行されるイベントを記述しましょう：

export default {
	emits: ['show'],
	data() {
		return {
			
		}
	}
}

では、子コンポーネント内にクリックを処理するボタンを作成しましょう：

<template>
	<button @click="handle">btn</button>
</template>

クリックハンドラーを作成します：

methods: {
	handle() {
		
	}
}

では、クリックハンドラー内で親の関数を実行させてみましょう。そのためには、$emit関数を使用してイベントを発行し、そのパラメータとして発行するイベントの名前を指定します：

methods: {
	handle() {
		this.$emit('show');
	}
}

子コンポーネントに2つの関数を渡してください。子コンポーネント内に 2つのボタンを作成し、それぞれが渡された関数の1つを呼び出すようにしてください。