Vue中v-on=“$listeners“的使用方法

$listeners

用于底层组件向高级层组件传递信息。

例如有 父组件A,子组件B,孙组件C 三个组件,如果C传递信息给B则可直接使用emit,如果是C向A传递信息还使用emit,则就需要C先emit给B,B再emit给A,这种方式比较繁琐,则此时可以使用v-on="$listeners"来满足当前需求。

用例:

C组件

javascript 复制代码
<template>
  <div @click="onClick">C组件</div>
</template>

onClick(){
  this.$emit("Msg",'123')
}

B组件

javascript 复制代码
<template>
  <cCom v-on="$listeners"/>
</template>

A组件

javascript 复制代码
<template>
  <bCom @Msg='Msg'/>
</template>

methods:{
  Msg(val){
    console.log(val) //123
  }
}

组件隔代通讯其它相关用法:

[Vue中v-bind="attrs"的使用方法![](https://file.jishuzhan.net/article/1686667784139837441/c40474ff2e744d67a8ad5ce7f92e147a.png)https://blog.csdn.net/weixin_44594219/article/details/127257804?spm=1001.2014.3001.5502](https://blog.csdn.net/weixin_44594219/article/details/127257804?spm=1001.2014.3001.5502 "Vue中v-bind=“attrs”的使用方法")vue2中EventBus的使用方法https://blog.csdn.net/weixin_44594219/article/details/127248681?spm=1001.2014.3001.5502

相关推荐
Novlan13 分钟前
@tdesign/uniapp 图标瘦身
前端
ManThink Technology7 分钟前
如何使用EBHelper 简化EdgeBus的代码编写?
java·前端·网络
. . . . .1 小时前
shadcn组件库
前端
2501_944711431 小时前
JS 对象遍历全解析
开发语言·前端·javascript
发现一只大呆瓜1 小时前
虚拟列表:支持“向上加载”的历史消息(Vue 3 & React 双版本)
前端·javascript·面试
css趣多多2 小时前
ctx 上下文对象控制新增 / 编辑表单显示隐藏的逻辑
前端
_codemonster2 小时前
Vue的三种使用方式对比
前端·javascript·vue.js
寻找奶酪的mouse2 小时前
30岁技术人对职业和生活的思考
前端·后端·年终总结
梦想很大很大2 小时前
使用 Go + Gin + Fx 构建工程化后端服务模板(gin-app 实践)
前端·后端·go
We་ct2 小时前
LeetCode 56. 合并区间:区间重叠问题的核心解法与代码解析
前端·算法·leetcode·typescript