Vue的全局事件总线实现任意组件间通信

全局事件总线原理：利用自定义事件实现

在main.js中安装全局事件总线

import Vue from 'vue';
import App from 'App.vue';
new Vue({render: h => h(App),beforeCreate() {// 在Vue实例创建之前安装全局事件总线Vue.prototype.$bus = this;}
}).$mount('#app');

在需要接收数据的组件中定义、解绑自定义事件

<!-- 需要接收数据的组件 -->
<template></template>
<script>export default {methods: {getValue(value) {console.log('接收到的数据为:' + value);}},mounted() {this.$bus.$on('zidingyiEvent', this.getValue);},beforeDestroy() {this.$bus.$off('zidingyiEvent');}}
</script>

在需要发送数据的组件中触发自定义事件

<template><div><button @click="send">点击传递数据</button></div>
</template>
<script>export default {data() {return {person: {name: 'wuwu',age: 18}}},methods: {send() {this.$bus.$emit('zidingyiEvent', this.person);}}}
</script>

Vue的全局事件总线实现任意组件间通信相关推荐

vue组件通信---全局事件总线（任意组件间通信）
描述: 全局事件总线是组件间通信的一种方式,适用于任意组件间通信 1.安装全局事件总线: 在main.js入口文件中完成全局事件总线的安装配置 new Vue({el:'#app',render: h ...
Vue学习（十六）：组件间通信
1. props 1.1 使用功能:让组件接收外部传过来的数据传递数据:<Demo name="xxx"/> 接收数据: 第一种方式(只接收):props:['na ...
「后端小伙伴来学前端了」Vue中全局事件总线（GlobalEventBus）原理及探究过程
前言上一篇文章写了 Vue 中的自定义事件,自定义事件是全局事件总线基础.我在上一篇文章中埋下了一个小小的伏笔.如下图: 我说过,在Vue中如果我们用(@orv-on)给组件绑定上一个自定义事件,其 ...
vue -- watch侦听器与父子组件间通信
watch侦听器方式一 1.默认有两个参数 newValue与oldValue 2.如果是对象类型那么拿到的是代理对象如果要进行深度监听需要加上 deep : true 如果想要第一次渲染直接执 ...
Vue学习笔记三（组件间通信）
主要通信方式包括: 1.props属性父---->子,子传父也可以通过方法实现,传递的可以是一个数据对象,或者一个方法,是方法的时候子组件调用该方法,通过传参方式将数据传递给父组件. < ...
Vue（组件间通信：props、自定义事件、全局事件总线、消息订阅与发布）
一.props props不仅可以实现父给子传递信息,还可以进行子给父传递信息 1.父给子传递信息: 父组件中给子组件实例传递信息子组件利用props进行接收组件传递信息(接收方式有三种:数组.对象 ...
Vue | 使用Vue脚手架【脚手架的基本使用+ref属性+props属性+mixin混入+插件scoped样式+TodoList+浏览器本地存储+组件的自定义事件+全局事件总线+过度与动画】
文章目录脚手架的基本使用初始化脚手架分析脚手架结构 render函数修改默认配置 ref属性 props属性 mixin混入插件 scoped样式 Todo-list案例组件化编码流程(通 ...
【Vue组件间通信】全局事件总线、订阅与发布
目录一.全局事件总线作用安装组件使用案例案例分析组件一(小明) 组件二(小红) 效果展示二.订阅与发布安装组件使用案例案例分析组件一(小明) 组件二(小红) 效果展示一.全局事 ...
全局事件总线 (GlobalEventBus)
一.一种组件间通信的方式,适用于任意组件间通信. 二.安装全局事件总线: new Vue({...BeforeCreate() {Vue.prototype.$bus = this; // 安装全局事 ...

Vue的全局事件总线实现任意组件间通信

Vue的全局事件总线实现任意组件间通信相关推荐

最新文章

热门文章