Vue组件通信

最新推荐文章于 2025-04-01 15:50:36 发布
原创 最新推荐文章于 2025-04-01 15:50:36 发布 · 738 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

本文详细介绍了Vue组件间通信的八种方式，包括props和$emit、$attrs和$listeners、中央事件总线、provide和inject、v-model、$parent和$children、broadcast和dispatch以及Vuex。适用于不同场景下的组件通信需求。

Vue组件通信八种方式

  1. props和$emit
    父组件向子组件传递数据是通过prop传递的，子组件传递数据给父组件是通过$emit触发事件来做到的。

  2. $attrs和$listeners
    第一种方式处理父子组件之间的数据传输有一个问题：如果父组件A下面有子组件B，组件B下面有组件C,这时如果组件A想传递数据给组件C怎么办呢？
    如果采用第一种方法，我们必须让组件A通过prop传递消息给组件B，组件B在通过prop传递消息给组件C；要是组件A和组件C之间有更多的组件，那采用这种方式就很复杂了。Vue 2.4开始提供了 a t t r s 和 attrs和 attrs和listeners来解决这个问题，能够让组件A之间传递消息给组件C。

  3. 中央事件总线
    上面两种方式处理的都是父子组件之间的数据传递，而如果两个组件不是父子关系呢？这种情况下可以使用中央事件总线的方式。新建一个Vue事件bus对象，然后通过bus.$emit触发事件，bus.$on监听触发的事件。

  4. provide和inject
    父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据，只要在父组件的生命周期内，子组件都可以调用。

  5. v-model
    父组件通过v-model传递值给子组件时，会自动传递一个value的prop属性，在子组件中通过this.$emit(‘input’,val)自动修改v-model绑定的值，即双向绑定

  6. $parent和$children 但这两种方法的弊端是，无法在跨级或兄弟间通信。

  7. boradcast和dispatch
    vue1.0中提供了这种方式，但vue2.0中没有，但很多开源软件都自己封装了这种方式，比如min ui、element ui和iview等。
    比如如下代码，一般都作为一个mixins去使用, broadcast是向特定的父组件，触发事件，dispatch是向特定的子组件触发事件，本质上这种方式还是emit的封装，但在一些基础组件中却很实用。

  8. vuex处理组件之间的数据交互
    如果业务逻辑复杂，很多组件之间需要同时处理一些公共的数据，这个时候才有上面这一些方法可能不利于项目的维护，vuex的做法就是将这一些公共的数据抽离出来，然后其他组件就可以对这个公共数据进行读写操作，这样达到了解耦的目的。

常见使用场景可以分为三类：
  1. 父子通信：
    父向子传递数据是通过 props，子向父是通过 events($emit)；通过父链 / 子链也可以通信（$parent / $children）；ref 也可以访问组件实例；provide / inject API；$attrs/$listeners
  2. 兄弟通信：
    Bus；Vuex
  3. 跨级通信：
    Bus； Vuex； provide / inject API、 $attrs/$listeners

参考：https://blog.youkuaiyun.com/zhoulu001/article/details/79548350

Vue 组件通信全攻略：4 种核心方式详解（附完整代码示例）
weixin_46001736的博客
05-19 1110
Vue 组件通信全攻略：4 种核心方式详解（附完整代码示例）
vue在组件里面注册子组件
weixin_40593587的博客
02-08 1857
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定义子组件</title> </head> <body> <script sr
Vue组件通信之bus详解
kirinlau的专栏
11-28 3344
vue最主要的两大特性就是响应式和组件化，组件化项目少不了组件之间的通讯，那么组件之间到底有几种通信方式呢。今天着重讲一下另外一种事件中转bus，非常简单快捷，不需要走其他中转或者提交事件，只需要触发和监听即可，也是我之前项目中用到比较多的一种，尤其是多组件依赖某一个小的组件的数据时，比如单页面上方有个radio-group，事件触发后需要其他组件同步更新数据时， 尤为好用，
vue中 关于$emit的用法
热门推荐
qq_43170213的博客
10-08 1万+
1、父组件可以使用 props 把数据传给子组件。 2、子组件可以使用 $emit 触发父组件的自定义事件。 vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn； 例如：子组件： <template> <div class="train-city"> <h3>父组件传给子组件的toCity:{{sendData}}</h3> <br/&g
vue 组件之间事件触发($emit)与event Bus($on)的使用
yehaocheng520的博客
06-14 6469
组件之间事件触发 之前使用组件，并不是很频繁，是水平的问题，目前工作中，公司大佬带着我手写过一个组件，再此很感谢他的指导。目前简单的组件已经有了自己的逻辑思维，正在从低级码农向中级码农蜕变。废话不多说。上图看看组件情况。 新增按钮组件： 操作按钮组合组件： 此时有个需求就是，无论是哪个按钮，如果改变了列表中的数据，列表需要实时更新数据。 此时就需要用到组件间的事件触发。 父子组件之间事件触发可以使用$emit $emit的使用方法如下： 在子组件中，写一个click点击事件。比如： cancelCU(
vue中实现在子组件中刷新父组件
liyiliang123的博客
09-10 3794
一、首先是父组件，现在父组件中的子组件属性上添加监听事件，signStatusVerdict 二、其次是子组件，发射一个事件给父组件的监听属性 三、最后是父组件，父组件中监听到事件后会执行listenSignStatus方法，执行更新父组件列表操作 ...
Vue组件通信方式
I'm兰陵王的博客
11-12 1754
在 Vue.js 中，组件之间的通信方式非常丰富，下面将详细介绍几种常见的组件通信方式，并附上代码示例，包括$attrs$listeners和ref。
vue组件通信（详解）
Nuyoah的博客
04-01 1355
详细介绍了Vue中组件之间的通信方式。
Vue 组件通信 - Ref组件通信
json_li的博客
03-31 1140
​Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue组件通信 - Ref组件通信
vue组件通信
csD_Dscnnnnnnn的博客
03-22 1503
vue组件通信
vue组件通信传值操作示例
12-29
本文实例讲述了vue组件通信传值操作。分享给大家供大家参考，具体如下： 父子组件通信： 子组件 <h3 click=alerrt> 我是子组件一 <span>{{parentMessage}} [removed] export default{ props: ['...
kang_vue_components:vue组件通信介绍原始码-源码通
03-24
让我们深入研究Vue组件通信的几种常见方式。 1. **props向下传递**： - 在Vue中，父组件可以使用`props`将数据传递给子组件。在`props`中定义接收的数据属性，然后在子组件的模板中使用它们。 - 例如：`...
Vue组件通信之Bus的具体使用
08-28
Vue组件通信之Bus的具体使用 在Vue组件通信中，Bus扮演着非常重要的角色。Bus是一种集中式的事件中间件，它允许组件自由交流，无论组件处于组件树的哪一层。在Vue 2.0中，$dispatch和$broadcast已经被弃用，官方...
vue中使用 lodash Debounce防抖不生效原因
dx_zheng的博客
12-03 1万+
最近项目需要做这样一个需求：基于element-ui框架的vue项目，输入input框实现实时搜索后台响应的数据。但用户每次按下键盘就发送请求会导致系统性能不好等问题，这时需要考虑到用防抖去解决这个问题。所以我考虑使用输入框监听+lodash库https://www.lodashjs.com/docs/lodash.debounce的防抖来实现。 步骤简单：首先引入+使用 import {debounce} from 'lodash'; <el-form-item label="" prop=""&
关于使用vue-awesome-swiper，轮播图不能播放和分页器没显示的解决方法
dx_zheng的博客
07-15 4729
vue-awesome-swiper在2020年做了更新，早上想使用vue-awesome-swiper完成vue项目的轮播图，发现一些轮播图不能播放和分页器没显示，经过一个上午，在老师的协助下终于解决了：原来是包版本太高的问题，肯能导致一些不兼容。 后来我指定了版本号，下回低版本 cnpm i vue-awesome-swiper@3 重启基本上就可以了，但要注意的是在阅读官网的时候最好采用定义组件方式写轮播图，用指令方式可能会出问题。 <swiper ref="mySwiper" :optio
Vue3使用vxe-table表格虚拟滚动 安装方法
dx_zheng的博客
01-06 4388
使用vxe-table表格虚拟滚动 做一个table，想要渲染上千万条数据，一般表格会导致浏览器卡顿或崩溃，这时我们可以使用插件解决。 但是在安装vxe-table的时候，运行不起来，一直报错，后来才发现是版本的问题。 安装的时候参照官网全局安装的写法会出现错误，不知道你们会不会 npm install xe-utils@3 vxe-table@next 还有注意这里版本要切换成最新的 后面找了很多方法，改成这种方式下载包： npm install xe-utils vxe-table@next 这样
解决vue修改数据页面无效的问题
dx_zheng的博客
01-05 3904
项目开发的过程中，经常会遇到这种情况：为data中的某一个对象添加一个属性。 如下案例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
vant库 如何引用本地图片
dx_zheng的博客
02-22 3148
vantjs组件库，若要引入本地的图片会获取不到。会没有显示图片。 <van-card :title="item.goodsName" :desc="item.spec" :num="item.number" :thumb="getImg()" > <!-- <div slot="num" @click.stop="return false">
组件化和模块化的区别
dx_zheng的博客
08-02 1014
什么是组件和模块 组件和模块的区别 为什么要使用组件化和模块化 什么是组件和模块 组件 把重复的代码提取出来合并成为一个个组件，组件最重要的就是重用（复用），位于框架最底层，其他功能都依赖于组件，可供不同功能使用，独立性强。 模块 分属同一功能/业务的代码进行隔离（分装）成独立的模块，可以独立运行，以页面、功能或其他不同粒度划分程度不同的模块，位于业务框架层，模块间通过接口调用，目的是降低模块间的耦合，由之前的主应用与模块耦合，变为主应用与接口耦合，接口与模块耦合。模块就像有多个US..
vue组件通信面试回答
最新发布
08-29
在面试中回答 Vue 组件通信相关问题，可从组件通信背景、常见方式、最佳实践、常见问题等方面阐述，以下是详细要点及示例： ### 组件通信背景 Vue 组件通信在实际项目中非常重要，是开发者面试中的高频考点。掌握好组件通信技巧，能提升代码的可维护性和应用性能 [^1][^3]。 ### 常见通信方式 - **Props 和 Emit**：Props 用于父组件向子组件传递数据，Emit 用于子组件触发父组件的自定义事件。示例代码如下： ```vue <!-- 父组件 --> <template> <div> <child-component :message="parentMessage" @childEvent="handleChildEvent"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { parentMessage: 'Hello from parent' }; }, methods: { handleChildEvent(data) { console.log('Received data from child:', data); } } }; </script> <!-- 子组件 --> <template> <div> <p>{{ message }}</p> <button @click="sendDataToParent">Send data to parent</button> </div> </template> <script> export default { props: ['message'], methods: { sendDataToParent() { this.$emit('childEvent', 'Hello from child'); } } }; </script> ``` - **Provide/Inject**：适用于跨层级组件通信，父组件通过 provide 提供数据，后代组件通过 inject 注入数据。示例代码如下： ```vue <!-- 祖先组件 --> <template> <div> <descendant-component></descendant-component> </div> </template> <script> import DescendantComponent from './DescendantComponent.vue'; export default { components: { DescendantComponent }, provide() { return { sharedData: 'Shared data from ancestor' }; } }; </script> <!-- 后代组件 --> <template> <div> <p>{{ sharedData }}</p> </div> </template> <script> export default { inject: ['sharedData'] }; </script> ``` - **Vuex/Pinia 状态管理**：用于管理应用的全局状态，多个组件可以共享和修改这些状态。以 Vuex 为例，示例代码如下： ```javascript // store/index.js import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { state.count++; } }, actions: { incrementAsync({ commit }) { setTimeout(() => { commit('increment'); }, 1000); } }, getters: { doubleCount(state) { return state.count * 2; } } }); // 组件中使用 <template> <div> <p>Count: {{ $store.state.count }}</p> <p>Double Count: {{ $store.getters.doubleCount }}</p> <button @click="$store.commit('increment')">Increment</button> <button @click="$store.dispatch('incrementAsync')">Increment Async</button> </div> </template> <script> export default { // ... }; </script> ``` - **EventBus（不推荐）**：创建一个全局的事件总线对象，组件可以通过它发布和订阅事件。示例代码如下： ```javascript // event-bus.js import Vue from 'vue'; export const eventBus = new Vue(); // 发送事件的组件 import { eventBus } from './event-bus.js'; export default { methods: { sendEvent() { eventBus.$emit('customEvent', 'Event data'); } } }; // 接收事件的组件 import { eventBus } from './event-bus.js'; export default { created() { eventBus.$on('customEvent', (data) => { console.log('Received event data:', data); }); } }; ``` ### 最佳实践 - **父子组件通信**：优先使用 Props 和 Emit 进行数据传递和事件触发 [^1][^3]。 - **跨组件通信**：对于跨层级组件，可使用 Provide/Inject；对于多个组件共享状态，使用 Vuex 或 Pinia [^1][^3]。 ### 常见问题 - **Props 单向数据流**：Props 是单向绑定的，子组件不能直接修改父组件传递的 Props 值，应通过 Emit 触发父组件的事件来修改 [^1]。 - **组件解耦**：使用状态管理库（如 Vuex、Pinia）可以实现组件之间的解耦，提高代码的可维护性 [^1][^3]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值