Vue カスタムイベントの発行 emit
Vue This article explains how to emit a Vue custom event. On the side that issues the event, define and issue the event, and on the side that receives the event, create an event handler and perform the procedures for listening to the event.
by JanitorSep 16, 2023
Vueのカスタムイベントの発行の方法( emit )に関する記事です。イベントを発行する側では、イベントの定義・発行を行い、イベントを受け取る側では、イベントハンドラーの作成・イベントリッスンの手続きを行うだけです。
Vueのカスタムイベントの発行の方法( emit )に関する記事です。イベントを発行する側では、イベントの定義・発行を行い、イベントを受け取る側では、イベントハンドラーの作成・イベントリッスンの手続きを行うだけです。
Jump Links
1. イベントを発行する側
2. イベントを受け取る側
3. 動作確認
1. イベントを発行する側
1. イベントを発行する側
今回の記事では下記のようなフォルダ構成を使用しています。「default.vue」で子コンポーネント「emitStudy/index.vue」から発行されるイベントのリッスンを行います。
今回の記事では下記のようなフォルダ構成を使用しています。「default.vue」で子コンポーネント「emitStudy/index.vue」から発行されるイベントのリッスンを行います。
イベントを発行する側では、イベントの定義・発行を記載します。「abc」という発行するイベントをdefineEmitsで定義し、emitを使って「abc」というイベントを発行しています。ページが表示されてから3秒後にemitを行っています。
イベントを発行する側では、イベントの定義・発行を記載します。「abc」という発行するイベントをdefineEmitsで定義し、emitを使って「abc」というイベントを発行しています。ページが表示されてから3秒後にemitを行っています。
emitStudy/index.vue
<script setup>
const emit = defineEmits( [ "abc" ] );
setTimeout( () => {
emit( "abc", "この文字列はイベントabcと一緒に送られます" );
}, "3000" );
</script>
<template>
<div>
emitStudy Page.
</div>
</template>
emitStudy/index.vue
<script setup>
const emit = defineEmits( [ "abc" ] );
setTimeout( () => {
emit( "abc", "この文字列はイベントabcと一緒に送られます" );
}, "3000" );
</script>
<template>
<div>
emitStudy Page.
</div>
</template>
2. イベントを受け取る側
2. イベントを受け取る側
イベントを受け取る側では、イベントハンドラーの作成・イベントリッスンの手続きを行います。「abc_handler」というイベントハンドラーを作成しています。template内の、@abc="abc_handler"という記述で、「abc」というイベントのリッスンを行い、イベントが来たら、「abc_handler」に渡します。
イベントを受け取る側では、イベントハンドラーの作成・イベントリッスンの手続きを行います。「abc_handler」というイベントハンドラーを作成しています。template内の、@abc="abc_handler"という記述で、「abc」というイベントのリッスンを行い、イベントが来たら、「abc_handler」に渡します。
default.vue
<script setup>
var test = reactive( { value: "最初に表示される文字列です" } );
var abc_handler = ( arg ) => {
test.value = arg;
};
</script>
<template>
<div style="margin-top: 10px; margin-left: 10px;">
<NuxtPage @abc="abc_handler"/>
{{ test.value }}
</div>
</template>
default.vue
<script setup>
var test = reactive( { value: "最初に表示される文字列です" } );
var abc_handler = ( arg ) => {
test.value = arg;
};
</script>
<template>
<div style="margin-top: 10px; margin-left: 10px;">
<NuxtPage @abc="abc_handler"/>
{{ test.value }}
</div>
</template>
3. 動作確認
3. 動作確認
yarn devを実施して、emitStudyにアクセスすると最初は下のような表示になります。
yarn devを実施して、emitStudyにアクセスすると最初は下のような表示になります。
3秒後に下のような表示になり、イベントの発行、処理ができたことがわかります。
3秒後に下のような表示になり、イベントの発行、処理ができたことがわかります。
Editors pick
Our other articles
Vue カスタムイベントの発行 emit
Vue This article explains how to emit a Vue custom event. On the side that issues the event, define and issue the event, and on the side that receives the event, create an event handler and perform the procedures for listening to the event.
by JanitorSep 16, 2023
Vueのカスタムイベントの発行の方法( emit )に関する記事です。イベントを発行する側では、イベントの定義・発行を行い、イベントを受け取る側では、イベントハンドラーの作成・イベントリッスンの手続きを行うだけです。
Vueのカスタムイベントの発行の方法( emit )に関する記事です。イベントを発行する側では、イベントの定義・発行を行い、イベントを受け取る側では、イベントハンドラーの作成・イベントリッスンの手続きを行うだけです。
Jump Links
1. イベントを発行する側
2. イベントを受け取る側
3. 動作確認
1. イベントを発行する側
1. イベントを発行する側
今回の記事では下記のようなフォルダ構成を使用しています。「default.vue」で子コンポーネント「emitStudy/index.vue」から発行されるイベントのリッスンを行います。
今回の記事では下記のようなフォルダ構成を使用しています。「default.vue」で子コンポーネント「emitStudy/index.vue」から発行されるイベントのリッスンを行います。
イベントを発行する側では、イベントの定義・発行を記載します。「abc」という発行するイベントをdefineEmitsで定義し、emitを使って「abc」というイベントを発行しています。ページが表示されてから3秒後にemitを行っています。
イベントを発行する側では、イベントの定義・発行を記載します。「abc」という発行するイベントをdefineEmitsで定義し、emitを使って「abc」というイベントを発行しています。ページが表示されてから3秒後にemitを行っています。
emitStudy/index.vue
<script setup>
const emit = defineEmits( [ "abc" ] );
setTimeout( () => {
emit( "abc", "この文字列はイベントabcと一緒に送られます" );
}, "3000" );
</script>
<template>
<div>
emitStudy Page.
</div>
</template>
emitStudy/index.vue
<script setup>
const emit = defineEmits( [ "abc" ] );
setTimeout( () => {
emit( "abc", "この文字列はイベントabcと一緒に送られます" );
}, "3000" );
</script>
<template>
<div>
emitStudy Page.
</div>
</template>
2. イベントを受け取る側
2. イベントを受け取る側
イベントを受け取る側では、イベントハンドラーの作成・イベントリッスンの手続きを行います。「abc_handler」というイベントハンドラーを作成しています。template内の、@abc="abc_handler"という記述で、「abc」というイベントのリッスンを行い、イベントが来たら、「abc_handler」に渡します。
イベントを受け取る側では、イベントハンドラーの作成・イベントリッスンの手続きを行います。「abc_handler」というイベントハンドラーを作成しています。template内の、@abc="abc_handler"という記述で、「abc」というイベントのリッスンを行い、イベントが来たら、「abc_handler」に渡します。
default.vue
<script setup>
var test = reactive( { value: "最初に表示される文字列です" } );
var abc_handler = ( arg ) => {
test.value = arg;
};
</script>
<template>
<div style="margin-top: 10px; margin-left: 10px;">
<NuxtPage @abc="abc_handler"/>
{{ test.value }}
</div>
</template>
default.vue
<script setup>
var test = reactive( { value: "最初に表示される文字列です" } );
var abc_handler = ( arg ) => {
test.value = arg;
};
</script>
<template>
<div style="margin-top: 10px; margin-left: 10px;">
<NuxtPage @abc="abc_handler"/>
{{ test.value }}
</div>
</template>
3. 動作確認
3. 動作確認
yarn devを実施して、emitStudyにアクセスすると最初は下のような表示になります。
yarn devを実施して、emitStudyにアクセスすると最初は下のような表示になります。
3秒後に下のような表示になり、イベントの発行、処理ができたことがわかります。
3秒後に下のような表示になり、イベントの発行、処理ができたことがわかります。
Editors pick
Our other articles