Vue2系列 — $listeners 多层嵌套组件通信

本文主要是介绍Vue2系列 — $listeners 多层嵌套组件通信，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

涉及爷爷组件和孙组件通信，孙组件可以 emit 数据到父组件，父组件再 emit 数据到爷爷组件，实现组件通信，但是比较繁琐

使用 $listeners 可以实现孙组件的数据直接传递到爷组件中去

官网原文：https://v2.cn.vuejs.org/v2/guide/components-custom-events.html （原文是利用 listeners 绑定原生事件）

孙组件 使用 emit

<template><div>孙组件</div>
</template>
<script>export default {mounted: function() {this.$emit("emitInfo","这是发送的信息")}};
</script>

父组件中 给孙组件添加 $listeners

<template><div class="child1-page"><div>父组件</div><-- 使用孙组件 !--><Sun v-on="$listeners"></Sun></div>
</template>

爷爷组件 监听事件

<template><div class="father-page"><div>这是爷爷组件</div><-- 使用父组件 !--><Father @emitInfo="getInfo"></Father></div>
</template><script>import Father from './Father'export default {components:{Father},methods: {getInfo:function(data){console.log(data)//这是孙组件发送的信息}}}
</script>

这篇关于Vue2系列 — $listeners 多层嵌套组件通信的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---