首页 > 其他分享 >组件通讯

组件通讯

时间:2024-09-20 09:23:37浏览次数:9  
标签:通讯 bus 通过 传递数据 Vue 事件 组件

在Vue中,组件之间的传值主要有以下几种方式:

1、父向子传递数据
在父组件中,通过自定义属性绑定要传递的数据。
在子组件中,通过props来接收这些数据。

// 父组件

// 子组件

2、子向父传递数据
子组件通过this.$emit触发事件,并传递参数。
父组件通过监听这个事件来获取子组件传递的数据。

// 子组件

// 父组件

3、兄弟组件之间传递数据
兄弟组件间的通信通常通过父组件作为中介。
一个兄弟组件通过父组件传递数据给另一个兄弟组件。

// 父组件

4、跨级组件传递数据
跨级组件之间的通信同样可以借助中间层级的组件来实现。
顶层组件接收来自下层组件的数据并通过props将其传递给另一层级的组件。

// 父组件

5、使用全局事件总线
定义一个全局的Vue实例 $bus 作为事件中心。
发送方通过 $bus.$emit 触发事件,接收方通过 $bus.$on 监听事件。

// 发送方组件

// 接收方组件

以上就是Vue中常见的组件传值方式。选择哪种方式取决于具体的应用场景以及组件之间的关系。1

标签:通讯,bus,通过,传递数据,Vue,事件,组件
From: https://www.cnblogs.com/chen0509/p/18421852

相关文章

  • VUE框架CLI组件化配置Router实现单页面路由程序省市切换联动------VUE框架
    //导入vue-router对象importVueRouterfrom"vue-router";importHebeifrom"../components/hebei.vue";importHenanfrom"../components/henan.vue";//创建路由器对象(在这个路由器对象中配置路由)constrouter=newVueRouter({//在这里配置所有的路由规则......
  • FastReport.OpenSource .Net下开源免费报表打印组件
    解决了这个问题:《winForm下,fastReport.net从.netframework升级到.net5遇到的错误“Operationisnotsupportedonthisplatform.”》本文内容转载自:https://www.fcnsoft.com/Home/ShowArticleNews/473最近被fastreport.net搞得有点烦躁,网上有很多破解版本下载可以下载使用,......
  • springcloud组件openfeign超时时间设置
    openfeign超时时间设置有两种方式1、通过配置类;2、通过配置文件1、使用配置类代码如下:@ConfigurationpublicclassFeignConfig{@BeanpublicRequest.Optionsoptions(){//第一个参数是连接超时时间,第二个参数是处理超时时间returnnewReque......
  • Element UI 表格组件 el-table,给复选框增加悬浮提示
    <el-tableref="multipleTable":data="tableData"tooltip-effect="dark"max-height="589"style="width:100%;margin-bottom:24px"v-if="act......
  • Linux 基础入门操作 第九章 进程之间通讯信号量
    systemV的进程间通信之信号量9.3信号量信号量与其他进程间通信方式不大相同,它主要提供对进程间共享资源访问控制机制。相当于内存中的标志,进程可以根据它判定是否能够访问某些共享资源,同时,进程也可以修改该标志。除了用于访问控制外,还可用于进程同步。信号量有以下两......
  • HarmonyOS开发之RichEditor组件实现评论编辑功能
    随着社交媒体和即时通讯应用的普及,用户对于内容创作的需求日益增长,特别是对于评论、回复等互动形式。为了满足这一需求,HarmonyOSNEXT提供了强大的RichEditor组件,支持图文混排和文本交互式编辑,使得开发者可以轻松构建功能丰富的编辑界面。本文将通过几个具体场景,详细介绍如何利用Ri......
  • ArkTs通过Web组件和H5交互
    arkts代码//xxx.etsimportweb_webviewfrom'@ohos.web.webview';import{router}from'@kit.ArkUI';import{call}from'@kit.TelephonyKit';import{BusinessError}from'@kit.BasicServicesKit';classtestClass......
  • springcloud负载均衡组件ribbon使用
    一、微服务负载均衡ribbon策略如下:1、线性轮询策略:RoundRibbonRule 2、重试策略:RetryRule3、加权响应时间策略:WeightedResponseTimeRule4、随机策略:RandomRule5、最空闲策略:BestAvailableRule6、区域感知轮询策略:ZoneAvoidanceRule(默认)每个策略对应什么意思,基本也就是字......
  • Vue 依赖注入组件通信:provide / inject 使用详解
    引言在Vue.js中,我们经常会遇到组件之间需要共享数据的情况。一种常见的解决方案是通过props和$emit事件来进行数据传递,但对于多层嵌套的组件结构或共享状态的场景,这种方式显得繁琐而不直观。幸运的是,Vue.js提供了一个稍微优雅的解方案:依赖注入-provide和inject。......
  • STM32F407单片机编程入门(七)USART串口485通讯实战含源码
    文章目录一.概要二.USART串口基本介绍三.STM32单片机USART内部结构图四.USART内部信号流向五.USART示波器信号解析六.485通讯基本概念七.CubeMX配置一个USART数据收发例程进行485通讯实验八.工程源代码下载九.小结一.概要USART(UniversalSynchronous/AsynchronousR......