vue中$listeners

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>