Vue.js

In Vue.js 3, `$emit` is a mechanism for firing events from a child component to a parent component to transmit data or trigger actions.

$emit

　Vue.js 3における $emit は、子コンポーネントから親コンポーネントにイベントを送るための機能です。これにより、子コンポーネントがデータやアクションを親コンポーネントに伝達できます。

HTML

<div id="app">
	<child-component @custom-event="handleEvent"></child-component>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
	<!-- JavaScript code here -->
</script>

JavaScript

const { createApp } = Vue;

// 子コンポーネント
const Childcomponent = {
	template: `
		<button @click="emitEvent">Event Send</button>
	`,
	methods: {
		emitEvent() {
			this.$emit('custom-event', 'Hello from child!');
		}
	}
};

// 親コンポーネント
createApp({
	components: {
		'child-component': Childcomponent
	},
	methods: {
		handleEvent(message) {
			alert(message);
		}
	}
}).mount('#app');
CDNの読み込み
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> で Vue.js 3を読み込みます。
子コンポーネント
ChildComponentはボタンを含んでおり、クリックすると emitEventメソッドが呼ばれ、$emitを使って親コンポーネントにカスタムイベント custom-eventを送信します。
親コンポーネント
handleEventメソッドを使って、子コンポーネントから送信されたイベントを受け取り、そのデータ（この場合は "Hello from child!"）を表示します。

　このように、$emitを使うことで子コンポーネントから親コンポーネントにイベントとデータを伝えることができます。