vue中$listeners

原创已于 2022-05-25 20:22:39 修改 · 4.4k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript

于 2022-05-24 23:15:55 首次发布

vue 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了Vue中`$listeners`的作用和使用场景。`$listeners`作为父组件事件监听器的容器，常用于组件封装，特别是在多级组件嵌套时，实现孙组件向祖父组件传递数据。例如，在A组件中通过B组件传递C组件的事件，C组件通过`this.$emit('getData', '传递数据给A')`触发事件，B组件使用`v-on=$listeners`接收并传递给A。此外，`$listeners`也常用于不破坏原有功能的UI库或自定义组件的二次封装。

vue中$listeners

详细

包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

理解

$listeners相当于一个中间容器。可以用于解决组件嵌套，孙组件传递数据给祖父组件。

当出现多级组件嵌套时（例如 A 嵌套 B ， B嵌套C ），C想传递数据A，就需要在B中给C 设置v-on=“$listeners”，然后通过@XX（具体时间）的方式获取C传递过来的数据。

使用

// A组件
<template>
    <B @getData="getData"></B>
</template>
<script>
export default {
    methods: {
       getData(data){ 
         //获取c 传递的数据
      }
    }
}
</script>

// B组件
<template>
    <C v-on="$listeners" ></C>
</template>

//C组件
<template>
    <button  @click="postData">传递数据</button>
</template>
<script>
export default {
    methods: {
       postData(){ 
         this.$emit('getData','传递数据给A')
      }
    }
}
</script>

组件封装

对一些UI库进行二次封装用，或者项目中已有的组件的二次封装，进行功能扩展，不影响原有功能，比如element-ui。

<template>
    <el-checkbox v-on="$listeners" v-bind="$attrs"  @click="myClick">
        <slot></slot>
    </el-checkbox>
</template>

<script>
export default {
    name: 'mCheck',
    inheritAttrs: false,
    data() {
        return {
        }
    },
    methods: {
        myClick() {
           // 自定义触发事件
        }
    }
}
</script>