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>
1
2
3
4
5
6
7
8
9
10

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

<template>
    <div class="child1-page">
        <div>父组件</div>
        <-- 使用孙组件 !-->
        <Sun v-on="$listeners"></Sun>
    </div>
</template>
1
2
3
4
5
6
7

爷爷组件 监听事件

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20