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