Vue.jsの$emitの使い方を1分でマスターしよう!#エンジニア #勉強 #vuejs

Posted by






1分でわかる!Vue.jsの$emitの使い方!

#1分でわかる!Vue.jsの$emitの使い方!

こんにちは、エンジニアの皆さん!Vue.jsの$emitの使い方を1分でわかるように解説します。

まずは、$emitとはVue.jsでイベントを発火するためのメソッドです。親コンポーネントから子コンポーネントにイベントを伝える際に使用されます。

#使い方

まず、親コンポーネントで$emitを使用してイベントを定義します。


<template>
<child-component v-on:eventName="handleEvent"></child-component>
</template>
<script>
export default {
methods: {
handleEvent() {
this.$emit('eventName');
}
}
}
</script>

次に、子コンポーネントで$emitで発火されたイベントを受け取ります。


<template>
<div>
<button @click="fireEvent">イベントを発火</button>
</div>
</template>
<script>
export default {
methods: {
fireEvent() {
this.$emit('eventName');
}
}
}
</script>

これで、親コンポーネントから子コンポーネントにイベントを伝えることができます!

#エンジニア #勉強 #一緒に勉強しよう #vuejs

Vue.jsの$emitの使い方を簡単に解説しました。エンジニアの皆さん、一緒に勉強しましょう!