🖥
Vue の emit は カスタムイベントを発生させて 親component の method を実行することが出来る ( #Vue #N
NOTE
コンポーネント間のデータのやり取り」では「親から子」にdataを伝達する手段「props」、そして「子から親」にdataを伝達する手段「emit」が存在します。それでは下記にそれぞれの概念について述べてまいります。
動作環境
nuxt環境にて
pages/resetable-counter.vue
<ResetCounter @reset-parent-counter="reset"/>
この書き方で 子component からのイベントを待ち受けるっぽい
reset-parent-counter という名前のイベントを待ち受ける
<template>
<div>
<h2>
Count: {{ parentCount }}
</h2>
<input type="button" @click="incrementParentCounter" value="Increment Parent">
<ResetCounter @reset-parent-counter="reset"/>
</div>
</template>
<script>
import ResetCounter from '~/components/ResetCounter.vue'
export default {
data () {
return {
parentCount: 1
}
},
components: {
ResetCounter
},
methods: {
incrementParentCounter (e) {
this.parentCount += 1
},
reset (e) {
this.parentCount = 1
},
}
}
</script>
たとえば @click= という書き方はクリックのイベントを待ち受ける (トリガーする)
同じ用に @event-name という書き方は、子 component でのカスタムイベントをトリガーにする
ということか、なるほど
components/ResetCounter.vue
この例では 子componentでボタンを押すと 子componentのメソッドが実行される
子componentのメソッドが実行された時に emit で reset-parent-counter という名前付のイベントを発生させている
this.$emit('reset-parent-counter')
<template>
<div>
<input type="button" @click="resetParentCounter" value="resetParentCounter">
</div>
</template>
<script>
export default {
methods: {
resetParentCounter (e) {
this.$emit('reset-parent-counter')
}
}
}
</script>
View
child component のボタンを押して
parent component の counter をリセットできるのが分かる
Original by Github issue
チャットメンバー募集
何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。
公開日時
2020-05-06
Discussion