vue组件传值之事件总线

如果想要使用事件总线进行组件之间的传值，首先我们需要将$eventBus挂载到vue实例上面

然后在A页面使用this.$eventBus.$emit("命名", 值);触发事件总线

B页面实现监控this.$eventBus.$on("命名", (event) => {}（需要注意，此处命名需要和this.$eventBus.$emit之中的命名保持一致）

需要注意一点就是，事件总线用完需要移除，一般会在组件销毁生命周期内移除，避免多次触发

下面是代码：

//main.js
import Vue from 'vue'
Vue.prototype.$eventBus = new Vue()//挂载到vue实例上全局定义//bortherOne.vue
<template><div><button @click="btn">点击传值</button>bortherOne</div>
</template>
<script>
export default {name: "bortherOne",data() {return {bortherOneValue: "我是bortherOne",};},mounted() {},methods: {btn() {this.$eventBus.$emit("deliverValue", this.bortherOneValue);//发起},},
};
</script>//bortherTwo.vue
<template><div><p>bortherTwo{{ bortherTwoValue }}</p></div>
</template><script>
export default {name: "bortherTwo",data() {return {bortherTwoValue: "我是bortherTwo，我负责接收值",};},mounted() {this.$eventBus.$on("deliverValue", (event) => {//监听接收传过来的值this.bortherTwoValue = event;console.log(this.bortherTwoValue);console.log(event, "event");this.getData(event);});},methods: {getData(event) {console.log(event, "在getdata里面打印接收到的值");},},beforeDestory() {this.$eventBus.$off("deliverValue");//避免多次触发},
};
</script>

除了上面这种初始时候在main.js之中直接将eventBus挂载到vue实例上面的方法，我们还可以是使用封装js文件的方法实现事件总线传值，代码如下：

//bus.js
import Vue from 'vue';// 使用 Event Bus
const bus = new Vue();export default bus;//使用的时候
import bus from '../utils/bus.js
bus.$emit("collapse", this.collapse);//触发
bus.$on("collapse", data => {})//监听
bus.$off("collapse")//移除

封装js文件的方法，多了一步导入需要用到的文件，其他触发，移除，监听基本一致这里不过多赘述

vue组件传值之事件总线相关推荐

Vue组件学习之事件总线和消息发布订阅
简介主要介绍事件总线的定义和编写方法和Vue是如何实现消息的订阅与发布的. 事件总线事件总线是组件间通信的一种方式,适用于任意组件间的通信,比如毫不相干的两个组件.父子组件间.后代组件等等,都能通 ...
vue组件通信---全局事件总线（任意组件间通信）
描述: 全局事件总线是组件间通信的一种方式,适用于任意组件间通信 1.安装全局事件总线: 在main.js入口文件中完成全局事件总线的安装配置 new Vue({el:'#app',render: h ...
vue组件传值之$attrs、$listeners
组件传值总结 props和emit:父子组件传值 provide和inject:父子组件或者爷孙组件传值 $parent,$root,$chidren:父子组件传值 vuex 事件总线(vue实例) ...
Vue组件传值的三种方法
Vue组件传值的三种方式 1.父传子父传子使用props: 1.父组件:即在使用的子组件标签上,自定义一个绑定数据,这里我使用的是"mymsg",将父组件的msg绑定在其上. 2 ...
vue组件传值的11种方式
不写这篇文章,我自己都不知道我知道的vue组件传值的方式竟然有11种之多,其实静下来想想,常用的也有五六种,先上一张总结图: 1.父组件传给子组件在子组件里定义一个props,即props:['ms ...
vue组件传值方式有哪些
Vue 作为一个轻量级的前端框架,核心两大特性就是响应式编程和组件化. 本文针对组件之间传值做详细讲解. Vue就是由一个一个的组件构成的,组件化是它的精髓,也是最强大的功能之一.而组件实例的作用域是 ...
vue组件传值的八种方式
1. 父传子首先在使用子组件的标签上通过自定义属性传递变量在子组件中通过 props 接受在接收的时候有两种接收方式数组形式和对象形式对象形式可以规定传来的变量的数据类型(type)默 ...
实战 | Element UI 父子组件传值与事件绑定（逆向）
这是小小本周的第四篇,本篇将会倒过来讲解Element UI 父子组件传值与事件绑定. 父子组件传值新建父组件和子组件新建父组件代码如下 <template><div id=& ...
实战 | Element UI 父子组件传值与事件绑定（正向）
这是小小的本周的第三篇,本篇将会讲解关于Element UI 父子组件传值与事件绑定. 父子组件传值新建父组件和子组件新建父组件代码如下 <template><div id=& ...

vue组件传值之事件总线

vue组件传值之事件总线相关推荐

最新文章

热门文章