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

相关推荐
DFT计算杂谈8 分钟前
自动化脚本一键绘制三元化合物相图
java·运维·服务器·开发语言·前端·python·自动化
子兮曰10 分钟前
深入 Superpowers:180k Stars 的开源 AI 编程方法论是如何工作的
前端·javascript·后端
沸点小助手23 分钟前
「新晋AI顶流PK:GPT-5.5 vs DeepSeek V4&掘友吐槽小会」沸点获奖名单公示|本周互动话题上新🎊
前端·人工智能
不会敲代码131 分钟前
从零到一:用 Vue3 + Kimi 大模型打造「拍照记单词」AI 应用
vue.js·typescript·aigc
隔壁的大叔32 分钟前
Markdown 渲染如何穿插自定义组件
前端·javascript·vue.js
Rik39 分钟前
用 AI Skill 封装你的工作流:从代码规范到全流程提效实战
前端·后端
Dabei43 分钟前
Android TV 焦点处理详解:遥控器与空鼠
android·前端
RONIN1 小时前
脚手架搭建项目框架(create-vite、vue-cli、create-vue、quasar-cli)
vue.js
愚者Pro1 小时前
Flutter基础学习
前端·javascript·vue.js
ZC跨境爬虫1 小时前
跟着 MDN 学 HTML day_17:媒体与 Web Audio API 自动播放指南——策略、检测与最佳实践
前端·笔记·ui·html·音视频·媒体