Vue学习之路（九） --- 非父组件之间的通信

最新推荐文章于 2023-06-25 10:40:07 发布
最新推荐文章于 2023-06-25 10:40:07 发布
阅读量258 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： Vue新手上路 文章标签： vue2.0
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_29329037/article/details/80090817
本文介绍了一种不依赖Vuex的组件间通信方法，通过在父组件或全局创建事件仓储eventHub，利用$emit和$on实现子组件间的通信。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1. 非vuex实现 非父组件之间的通信

原理是：在父组件或者全局创建一个事件仓储eventHub，然后通过$emit 和 $on 实现通信

1.1 通过在window上绑定eventHub的Vue实例对象，具体实现方法如下：

目录结构

这里写图片描述这里写图片描述

在绑定eventHub实例对象之前需要import Vue from ‘vue’，然后根组件中使用window.eventHub = new Vue()

这里写图片描述

在cartControl子组件通过$emit发送通信，在shopcart里通过$on接收通信
这里写图片描述
这里写图片描述

1.2通过在根组件中的main.js中注册事件仓储

在main.js中创建事件仓储后，直接在data中绑定eventHub，然后就可以在子组件通过this.$root.eventHub访问到事件仓储

这里写图片描述这里写图片描述这里写图片描述

【Vue3】组件通信之v-model
又言又语
08-03 1634
本文介绍 Vue3 中如何使用v-model实现组件间通信，即组件间相互传数据。父组件向子组件传数据，实现方案有：propsv-model$ref默认插槽 / 具名插槽子组件向父组件传数据propsv-model$parent自定义事件作用域插槽父组件向子组件的子组件传数据，即向孙子组件传数据$attrsproviderinject任意组件间传数据mittPinia使用v-model实现组件间通信的方法常用于封装自定义 UI 组件库，在日常业务开发过程中较少使用；使用。
Vue3中的常见组件通信之v-model
最新发布
m0_63165331的博客
06-05 1572
本文讲述vue中组件通信v-model。详细解释了v-model的实现双向绑定的底层原理。
vue学习笔记
Martian的博客
10-17 205
0.父子组件的生命周期。 父子组件的生命周期 1.监听组件的生命周期 例：父组件需要在子组件mounted的时候，调用某个函数，常规写法如下： // Parent.vue <Child @mounted="doSomething"/> // Child.vue mounted() { this.$emit("mounted"); } 这里提供一种特别简单的方式，子组件不需...
vue2.0:子组件调用父组件
weixin_38168139的博客
05-04 110
main.js文件添加如下： new Vue({ router, render: h => h(App), data: { eventHub: new Vue() }}).$mount('#app'); 父组件： 监听事件: this.$root.eventHub.$on('cart.add', (target) => { this....
Vue 事件触发和监听
weixin_47026347的博客
02-05 1228
Vue 事件触发和监听 一、事件触发（$emit） 在需要触发的页面添加触发事件 this.$root.eventHub.$emit('事件名', 参数); <script> changePageMenu(pageMenu, e){ //事件触发也需要一个事件来触发，比如此处是切换标签页时触发 this.$root.eventHub.$emit('changePageMenu1', pageMenu); }, </scr
vue使用this.$root.eventHub和this.$bus
qq_45030898的博客
06-25 630
vue使用this.$root.eventHub和this.$bus
vue2.0 事件广播实例
软宝宝的博客
07-14 1611
vue2.0 广播实例 vue2.0中可以使用 $emit, $on, $off 分别来分发、监听、取消监听事件,因为Vue 实例实现了一个事件分发接口,所以通过new vue（） 第一步：全局设置 在vue项目中找到全部APP.vue文件，加上以下代码 eventHub: new Vue() 第二部 这样我们就可以在任何组件都可以调用事件发射接收的方法 某一个组件内调用事件触发 //通过this.$root.eventHub获取此对象 //调用$emit 方法 this.$root.eventHub
vue 父组件通过v-model接收子组件的值的代码
10-16
在Vue.js中，组件之间的通信是实现复杂功能的重要手段。...这种技术方法是Vue组件开发中的一个核心知识点，是组件化开发实践中的必备技能。掌握此技术点，能够帮助开发者更好地设计和实现复杂的用户交互界面。
vue.js使用v-model实现父子组件间的双向通信示例
10-15
在父子组件通信中，`v-model`扮演的角色有所不同。父组件通过`v-model`传递一个值到子组件，子组件则可以通过监听`input`事件并更新这个值来实现向父组件的通信。以下是对示例代码的详细解释： ```html <!-- 父组件...
总结了-Vue3-的七种组件通信方式-别再说不会组件通信了.docx
12-18
在 Vue3 中，组件通信是指组件之间的数据交换和事件传递。组件通信是 Vue 应用程序中非常重要的一部分，它使得不同的组件能够协同工作，实现复杂的业务逻辑。本文将总结 Vue3 中的七种组件通信方式，帮助开发者更好...
Vue2中父组件调用子组件内函数的方法
Queen-Shir的博客
06-29 1万+
参考网址：https://blog.csdn.net/a5534789/article/details/53415201 Demo： 1、新建一个空的vue对象，命名为eventHub; 2、在父页面 hsi.vue 使用 this.root.eventHub.root.eventHub.root.eventHub.emit(‘function1’,’parame’); 随...
页面跳转退出后重新进入的时候会调用多次接口（Vue.$root.eventHub.$on()）
weixin_41870520的博客
08-02 1506
有时候会发生事件只被emit触发了一次，但是回调函数却被执行了多次的现象。这种现象往往发生在页面跳转退出后重新进入的时候。 原因： this.$root.Bus.$on实际是向Bus容器中添加一个事件监听器，当页面跳转时，原来的vue组件被注销，但是原来vue组件向Bus容器中添加的事件监听器并不会被移除。因此，当下次进入这个vue组件对应的页面时，执行到this.$root.Bus.$on时，又会向Bus容器中添加一个重复的事件监听器，以此类推，导致Bus容器中有很多个一模一样的事件监听器，从而导致事件
组件传值eventHub设置全局的使用
weixin_34038293的博客
02-26 1548
组件传值eventHub设置全局的使用 main.js中设置全局数据 new Vue({ data: { eventHub: new Vue(), }, }) 复制代码html标签数据展示 <template> <span style="color:#fed731">{{roomd}}</span> </template> 复制...
Vue2.0 事件发射与接收
weixin_30800807的博客
11-30 350
由于vue2.0 移除了1.0中的$dispatch 和$broadcast 这两个组件之间通信传递数据的方法 ,官方的给出的最简单的升级建议是使用集中的事件处理器,而且也明确说明了 一个空的vue实例就可以做到,因为Vue 实例实现了一个事件分发接口. 请直接看代码,在初始化web app的时候，给data添加一个 名字为eventhub 的空v...
vue2.0父子组件以及非父子组件通信传参详解
binginsist的博客
04-01 1万+
1.父组件传递数据给子组件 父组件数据如何传递给子组件呢？可以通过props属性来实现 父组件： parent> child :child-msg="msg">/child>//这里必须要用 - 代替驼峰 /parent> data(){ return { msg: [1,2,3] }; }123456789123456789 子组件通
vue在main.js中eventHub
Moqin
03-14 960
有时候在vue 中我们需要在不同的组件中传值数据，大部分情况下我们可以store，或者可以使用inject 注入,又或者使用一个单独得js，类似bus.js 。但是我们还是可以使用另外的一种bus。不过这个使用更加方便，而且不用新建文件。这个方法可以无视嵌套多少层级 主要的使用方法是在main.js中，在new Vue时候加上一个data的对象参数 ➡️代码示例：文件结构是index.vue...
Vue的this.$root.Bus.$on事件被多次触发、多次监听的问题
热门推荐
qq_26963495的博客
01-15 1万+
前端vue项目中，各个组件（非父子关系也可）之间可以通过Bus进行事件通信。 main.js中： import Vue from 'vue' const Bus = new Vue(); const app = new Vue({ el: '#app', data: {Bus}, router, components: {App}, template: '&lt;App/...
Vue 父子组件 监听scroll事件
独孤听雨
05-02 4248
借助ref实现dom操作，借助eventHub实现消息传递1. 监听scroll事件如果 父子组件  嵌套  在父组件上 存在滚动前提：父容器设置：overflow-y:scroll，子组件、孙子组件等未设置 则需在父组件上监听滚动事件有效，在子组件、孙子组件中监听无效， 在父组件 设置一个 ref="viewhome"； 在父组件的 mounted中设置： this.boxHome = this...
vue中使用window.eventBus事件重复触发的问题
studentenglish的博客
10-15 2119
vue中数据传输，会用到window.eventBus进行全局事件传递，emit和on全局事件的数据传递。但是如果使用不当，会造成时间重复触发。场景如下： 在main.js中，创建vue实例，并绑定到全局变量window.$bus上。 window.$bus = new Vue() 在a.vue中设置触发事件 window.$bus.$emit('user_task_change') ...
Vue移动端Slider组件：vue-onlySlider-x
3. **Vue组件**: Vue允许开发者通过创建可复用的、独立封装的组件来构建大型应用。每一个Vue组件都会拥有自己的模板、逻辑和样式。vue-onlySlider-x就是一个这样的组件，它封装了移动端Slider的功能，以便在Vue.js...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值