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

相关推荐
橘子编程几秒前
React 19 全栈开发实战指南
前端·react.js·前端框架
DanCheOo2 分钟前
AI Streaming 架构:从浏览器到服务端的全链路流式设计
前端·agent
我是小趴菜7 分钟前
前端如何让图片、视频、pdf等文件在浏览器直接下载而非预览
前端
cg3312 分钟前
开源项目自动化:用 GitHub Actions 让每个 Issue 都被温柔以待
前端
haierccc22 分钟前
Win7、2008R2、Win10、Win11使用FLASH的方法
前端·javascript·html
We་ct25 分钟前
LeetCode 50. Pow(x, n):从暴力法到快速幂的优化之路
开发语言·前端·javascript·算法·leetcode·typescript·
柠檬味的Cat28 分钟前
使用腾讯云COS作为WordPress图床的实践
前端·github·腾讯云
Hilaku30 分钟前
卷AI、卷算法、2026 年的前端工程师到底在卷什么?
前端·javascript·面试
非凡ghost32 分钟前
AIMP(音乐播放软件)
前端·windows·音视频·firefox
xiaotao13134 分钟前
Vite 完全学习指南
前端·vite·前端打包