サマリ
Vue.jsで孫 から 親のコンポーネントへ値を渡す際、$emitを使いますが、中間のコンポーネントが増えてくるとその分emitを記述しないといけません。
この中間のコンポーネントでのemitの記述を減らすのに$listenersが使えますので、その紹介をします。
$emitと$listenersの比較
$emitを使った場合
// Parent.vue
<template>
<Child @click="onClick" />
</template>
<script>
export default {
components: {
Child,
},
methods: {
onClick(value) {
alert(value);
},
},
}
<script>
// Child.vue
<template>
<GrandChild @click="onClick" />
</template>
<script>
export default {
components: {
GrandChild
},
methods: {
onClick(value) {
this.$emit('click', value);
}
},
}
<script>
// GrandChild.vue
<template>
<button @click="onClick">Hello World</button>
</template>
<script>
export default {
methods: {
onClick(event) {
this.$emit('click', event.target.textContent);
},
},
}
<script>
※ 上記のコードはサンプルのため実際の案件コードとは異なります。
今回はバケツリレーの例のためご了承ください。
こんなのがさらに何階層も続くと、中間のコンポーネントを作成する際に以下の状態になってしまいます。
「また$emitを書かないといけないのか、、」
「あー、このコンポーネントにも$emit書かなきゃ、、、」
しまいには記載漏れしてる子コンポーネントがないか心配になってしまいます、。
(；・∀・)ﾀﾞ､ﾀﾞｲｼﾞｮｳﾌﾞ…?
そんな時に$listenersが使えます！
$listenersを使った場合
// Parent.vue
<template>
<Child @click="onClick" />
</template>
<script>
export default {
components: {
Child,
},
methods: {
onClick(value) {
alert(value);
},
},
}
<script>
// Child.vue
<template>
<GrandChild @click="$listeners['click']" />
</template>
// GrandChild.vue
<template>
<button @click="onClick">Hello World</button>
</template>
<script>
export default {
methods: {
onClick(event) {
this.$emit('click', event.target.textContent);
},
},
}
<script>
中間のコンポーネントでemitさせる際の記述が減りましたね！
どうですか！
楽ですよね！？
書き方の説明
@clickのclickの部分は、子コンポーネントから$emitされたイベント名を記載し、
$listeners['']の中に記載するのは親で受け取りたいイベント名を記載します
<template>
<GrandChild @click="$listeners['click']" />
</template>
まとめ
バケツリレーの際、中間に挟まれてるコンポーネントでは積極的に$listenersを使って、記述量を減らしていきましょう！
※ 実は$listenersはVue3で削除されてます、、！
※ ただ、Vue3はIE未対応のため、来年の6月まではこのwikiは役に立つ想定です、、
おまけ
また、この$listenersの挙動の面白いところがありまして、子コンポーネントにv-on="$listeners"と記載すると、子のイベントリスナを親側で直接参照できるんですね〜
// Parent.vue
<template>
<Child @click="onClick" />
</template>
<script>
import Child from './Child.vue';
export default {
components: {
Child,
},
methods: {
onClick(value) {
console.log('くりっく');
},
},
}
<script>
// Child.vue
<template>
<button v-on="$listener"></button>
</template>
ただ、上記の状態だと@click.nativeという記法に書き換えられますし、なんなら.nativeを使う際は子コンポーネントに$listenersを書く必要を感じられません！（.nativeは子コンポーネント のルート要素のイベントを指します）
ただし.nativeに書き換えたとして、以下の例だとどうでしょう？
// Parent.vue
<template>
<Child @click.native="onClick" />
</template>
// Child.vue
<template>
<div>
<input type="radio">
</div>
</template>
ルート要素はdivなので、divのクリックイベントを取得してしまいますね...
DOMの構造に依存してしまいます、、。
そこで$listenersを使えばいいのです！
// Parent.vue
<template>
<Child @click="onClick" />
</template>
// Child.vue
<template>
<div>
<input type="radio" v-on="$listeners">
</div>
</template>
これでDOMの構造に依存することなく、inputのイベントを参照できます！
※ 参照できるイベントはclickに限らず、mouseoverといった他のイベントも参照できます！
もっと学びたい人向け
この辺のもう少しお得な書き方が↓に載ってますので、興味のある方はご覧ください。
https://qiita.com/shinobu_shiva/items/e0c458aa6c1e683a9881