vue $listeners用法记录

有了这个 $listeners property，你就可以配合 v-on="$listeners" 将所有的事件监听器指向这个组件的某个特定的子元素。下面直接上代码,$listeners就是多级子组件emit传递偷懒写法（还有一个attr）

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

<template>
    <div class="child1-page">
        <div>这是子组件-1</div>
        <child-2 v-on="$listeners"></child-2>
    </div>
</template>

<script>
    import child2 from "./Child2"
    export default {
        name: 'Child1',
        components:{child2},
        props: {},
        data() {
            return {}
        },
        created() { },
        mounted() { },
        methods: {}
    }
</script>

<template>
    <div class="father-page">
        <div>这是父组件</div>
        <child-1 @child2Info="getInfo"></child-1>
    </div>
</template>

<script>
    import child1 from './Child1'
    export default {
        name: 'Father',
        components:{child1},
        props: {},
        data() {
            return {}
        },
        created() { },
        mounted() { },
        methods: {
            getInfo:function(data){
                console.log(data)
                //这是子组件1-1-1发送的信息
            }
        }
    }
</script>