简述Vue组件通讯有哪些方式?

于 2024-08-05 09:01:22 发布
阅读量617 收藏 9
点赞数 11
文章标签： vue.js javascript 前端 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_61132537/article/details/140917382
版权

1、props 和 $emit 父组件向子组件传递数据是通过props传递的，子组件传递给父组件是通过$emit触发事件来做到的。
2、$parent 和 $children 获取单签组件的父组件和当前组件的子组件,
3、$attrs 和 $listeners A ->B ->C。Vue2.4开始提供了$attrs和$listeners来解决这个问题。
4、父组件中通过 provide 来提供变量，然后在子组件中通过 inject 来注入变量。(官方不推荐在实际业务中适用，但是写组件库时很常用。)
5、$refs 获取组件实例。
6、envetBus 兄弟组件数据传递，这种情况下可以使用事件总线的方式,
7、vuex 状态管理

kidding723
关注
vue组件通讯的几种方式
weixin_64608867的博客
04-26 1868
方法一、props/$emit 父组件A通过props的方式向子组件B传递，B to A 通过在 B 组件中 $emit, A 组件中 v-on 的方式实现。 1.父组件向子组件传值 接下来我们通过一个例子，说明父组件如何向子组件传递值：在子组件Users.vue中如何获取父组件App.vue中的数据 users:["Henry","Bucky","Emily"] //App.vue父组件 <template> <div id="app"> <users v-b...
Vue3组件通讯（父子组件通讯）详解
是阿瑶的博客呀~
01-26 1832
vue组件间的通讯的10种方法
Serena_tz的博客
05-09 6129
1.props/$emit props主要用于父组件传递数据给子组件，父==>子。 Vue自定义事件 父组件可以在使用子组件的地方直接用 v-on来监听子组件触发的事件 。即父组件中使用 v-on绑定自定义事件，然后在子组件中使用 $emit(eventName,data)触发事件 仅仅用于父子组件传递，不适用于 三层及其以上 2. $emit/$on 这种方法通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级。当
vue中组件间通信的6种方式
jiangjunyuan168的博客
01-23 4万+
前言 组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互进行直接的引用，所以组件间的相互通信是非常重要的。 除了使用vuex外还有下面6种组件间的通信方式： 1、 props / $emit 父组件通过 props 向子组件传递数据，子组件通过 $emit 和父组件通信 （1）父组件向子组件传值（props的用法） props的特点： props只能是父组件向子组件进行传值，props使得父子组件之间形成一个单向的下行绑定。子组件的数据会随着父
vue 组件之间的通信
青蛙king的博客
08-14 5716
目录 前言 一、props 和 $emit 二、$attrs 和 $listeners 三、中央事件总线 四、provide 和 inject 五、v-model 六、$parent 和 $children 七、boradcast 和 dispatch 八、vuex 处理组件之间的数据交互 前言 参考：https://segmentfault.com/a/1190000018331900 vue 组件之间的通信方式大概有 9种： props 和 $emit $refs $at.
Vue中 EventBus 的使用，如何实现Vue中的EventBus
程邓楠的博客
02-20 1万+
vue 中兄弟组件或者多级组件之间的通讯，是比较麻烦的，这个时候呢，我们就可以使用 EventBus来实现我们想要的业务，但是面试的时候又经常会被问到，或者让写出 EventBus，所以就来探索一下 一、Vue中如何使用 EventBus？ 1. 初始化时全局定义 import Vue from 'vue' // main.js 中 // 第一种定义方式 Vue.prototype.$eventBus = new Vue() // 第二种定义方式 window.eve...
Vue中组件之间通信的-六大方式-总结
JackieDYH的博客
05-12 2340
方式一：props/$emit 父组件向子组件传值 通过一个例子，说明父组件如何向子组件传递值：在子组件Users.vue中如何获取父组件App.vue中的数据users:["Henry","Bucky","Emily"] 注：父组件通过props向下传递数据给子组件。注：组件中的数据共有三种形式：data、props、computed //App.vue父组件 <template> <div id="app"> <users v-bind:user.
vue面试题集合
最新发布
fhvhdfhfh的博客
01-12 439
vue面试题
vue组件之间是如何进行通信的，有哪几种常见的通信方式
weixin_48725904的博客
08-10 821
Vue组件间是如何进行通信的，有哪几种常见的通信方式
Vue\React\Angular的区别
......
03-18 6773
1. 基本概念 Angular 是一个应用设计框架与开发平台，用于创建高效、复杂、精致的单页面应用。 React是一个用于构建用户界面的 JavaScript 库 Vue (读音 /vjuː/，类似于view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 2. 三者比..
eventBus在vue中的使用
Annie的博客
07-01 2万+
在全局定义，全项目通讯
vue组件通信
qq_67983277的博客
11-09 783
vue组件通信
vue组件通信方式之eventBus
Hello_MrShu的博客
10-17 3430
父子通信，通常父组件向子组件通过props传值，子组件通过使用$emit向父组件传参，还有诸如 $parent ,$children, $refs 等直接获取组件的方法。兄弟组件，或者没有直接联系的组件之间进行通信时就会比较麻烦，比较常用的就是vuex等状态管理工具。此时，我们还有一个简单的方法那就是vue事件总线（eventBus）绑定前不解绑的话，主要有两方面的问题：1、事件反复触发；2、内存泄漏；$on;$off ;内存泄漏（闭包）
vue中EventBus的基本使用
wzuof的博客
10-14 3719
前言 vue组件中父子组件通信，父组件会通过 props 向下传数据给子组件，当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件。两个页面没有任何引入和被引入关系，该如何通信？使用EventBus即可。 1.建立一个eventBus.ts(或者js文件) import Vue from 'vue' export default new Vue() 2.传递值的页面 import EventBus from "@/components/EventBus"; EventBus.$emit('sea
vue eventBus 使用
小耳朵晨晨
03-10 814
主页是helloWorld: a.vue 和b.vue是两个兄弟模块 实现功能 两个兄弟模块都能使用helloWord的num 。 新建一个event-bus.js import Vue from 'vue' export const EventBus = new Vue() 在main.js中创建实例 （添加一句） Vue.prototype.$EventBus = new Vue(); helloWorld页面 <template> <div class="h
vue 组件之间使用eventbus传值
热门推荐
胡世林的博客
07-15 4万+
eventbus vue vue-cli 组件传值
Vue总线Bus兄弟组件传参
happy任的博客
10-15 3787
一、前言     使用场景：在vue项目较小的情况，使用bus总线思路来完成vuex的传值功能。 二、内容     //bus.js import Vue from "vue"; const Bus = new Vue(); export default Bus; //组件A、组件B中分别引入Bus import Bus from "bus.js的路径"; //组件A中绑定事件，来...
vue组件之间的通信 vue-bus和vuex
lyc2786161648的博客
03-15 1万+
前言.父子组件之间的通信vue提供了更直接的方式，此处不细说，不会的可以去官网研读文档。但是官方没有提供直接的方法用于兄弟组件之间的传值以及相关的逻辑处理。因此就有了vue-bus和vuex.vue-bus可用于不是特别复杂的项目中任意组件的传值问题。vuex不仅能实现组件之间通信的问题还提供了相应的逻辑处理方法。但是也更为庞大，所以一般简单的传值问题可用于vue-bus解决 1.vue-bu官网...
vue中bus总线使用小结
weixin_42180591的博客
10-28 741
1.emit和emit和emit和on事件必须使用一个空的Vue实例作为中央事件总线的实例上，才能够触发，否则会出现子组件$emit后父组件没有监听到函数的变化的情况。 新建一个文件bus.js 代码如下： import Vue from 'vue' const bus = new Vue() export default bus 2.可以在main.js中引入该文件，并将其挂载到Vue函数上，这样做的好处是在Vue实例或组件中不用再去重复引用bus 代码如下： import bus from '@/ut
vue组件通讯有哪些，详细说明一下
03-14
Vue组件通讯有以下几种方式： 1. 父子组件通讯：父组件通过props向子组件传递数据，子组件通过$emit触发事件向父组件传递数据。 2. 兄弟组件通讯：通过一个空的Vue实例作为中央事件总线（event bus），兄弟组件都...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值