vue中$listeners
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>
更多推荐
已为社区贡献2条内容
所有评论(0)