vue $listeners用法记录

最新推荐文章于 2024-02-28 14:47:33 发布

避于核桃之内自誉为无疆限之君主

最新推荐文章于 2024-02-28 14:47:33 发布

阅读量1.1w

点赞数 3

分类专栏：前端-vue

本文链接：https://blog.csdn.net/shenqikai0319/article/details/114012310

版权

前端-vue 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

"本文通过一个示例展示了Vue中如何使用$listeners属性进行事件传递，简化多级子组件间通信。在子组件1-1中触发`child2Info`事件，该事件通过子组件1的`v-on="$listeners"`传递到子组件2，并最终由父组件监听并处理，打印出信息。这种方式简化了多级子组件间的事件传递和监听。"

摘要由CSDN通过智能技术生成

有了这个 $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>