涉及爷爷组件和孙组件通信,孙组件可以 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>