Vue组件间通信之$emit/$on

一、介绍

一个vue.js肯定是由多个组件组成的，而组件实例的作用域是相互独立的，即不同组件之间的数据无法简单的相互引用。

但是避免不了有时需要相互引用，比如一个父组件包含多个子组件，当父组件更改后需要同时更新各个子组件的数据。

一般组件间有几种关系，像A.vue与B.vue是父子关系，A.vue与C.vue是隔代关系，C.vue和D.vue是兄弟关系，

不同的关系之间可能通信方式不同，比如父组件向子组件传递值经常使用props方式。$emit/$on方式可以应用每种关系。

二、实现方式

通过一个空的Vue实例作为中央事件总线，用它来触发事件和监听事件，实现轻量的组件间通信，包括父子、兄弟和跨级。

var Event=new Vue();  // 在第三方组件
Event.$emit(事件名,数据);  // 在需要发送的组件import第三方组件，并发送
Event.$on(事件名,data => {});  // 在需要接受的组件improt第三方组件，并接受和处理

具体例子：

1.第三方组件，A.vue

import Vue from 'vue';
export var event = new Vue();

2.需要发送信号的组件，B.vue

import { event } from './A.vue';bbb: function(){event.$emit("signal");
}

3.需要接受信号的组件，C.vue

import { event } from './A.vue';mounted: function(){event.$on('signal', () => {this.getPublishData());})
}

C.vue监听了自定义事件signal，因为不知何时会触发事件，所以在mounted或created中去监听，监听完成调用函数去处理。

注：必须需要一个第三方组件，不能将这个vue实例直接放在B.vue和C.vue中。

Vue组件间通信之$emit/$on相关推荐

Vue 组件间通信方法汇总
Vue 组件间通信方法汇总 ⭐️ 更多前端技术和知识点,搜索订阅号 JS 菌订阅除了使用 Vuex 方法外,vue 提供了各种各样的组件间通信的方案.文章整理一下父子组件.兄弟组件.祖先后代组件间 ...
vue组件间通信六种方式
vue组件间通信六种方式组件之间的传值通信组件之间的通讯分为三种:父传子.子传父.兄弟之间的通讯: props/$emit 父传子:主要是通过props来实现的具体实现:父组件通过import引 ...
vue组件间通信传递数据的四种方式（路由传参、父子组件传参、兄弟组件传参、深层次传参）
前言: vue组件间通信对于经常来写vue的伙伴来说应该是很轻松的,对于一些刚入门的伙伴来说可能就有些迷茫,感觉方式有很多种,但是总结起来又不知道应该怎么说,在下面的文章中,我结合自己的开发过程中经常 ...
Vue.js解析(十)【Vue组件间通信】
什么是Vue组件? 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊 ...
Vue 组件间通信有哪几种方式
Vue 组件间通信主要指以下 3 类通信:父子组件通信.隔代组件通信.兄弟组件通信 1.props / $emit 适用父子组件通信 props是父组件将值传给子组件,$emit是子组件通过派发事件 ...
vue组件间通信六种方式（完整版）
前言组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系: 如上图所示 ...
每日一道面试题：Vue 组件间通信有哪几种方式？
Vue 组件间通信有哪几种方式? 父子组件通信.隔代组件通信.兄弟组件通信 (1)props / $emit适用父子组件通信 - 这种方法是 Vue 组件的基础,相信大部分同学耳闻能详,所以此处就不 ...
Vue 组件间通信几种方式（完整版）
组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系: 如上图所示,A 和 B.B 和 C.B 和 D 都是 ...
vue组件间通信之兄弟组件通信（vue3.0$EventBus）
vue组件间通信之兄弟组件通信(vue3.0$EventBus) vue组件中的数据传递最最常见的就是父子组件之间的传递.父传子通过props向下传递数据给子组件:子传父通过$emit发送事件,并携带 ...

Vue组件间通信之$emit/$on

一、介绍

二、实现方式

Vue组件间通信之$emit/$on相关推荐

最新文章

热门文章