Vue之bus数据传输优点以及弊端

62 阅读 0 评论 41 点赞

我是靠谱客的博主唠叨寒风，最近开发中收集的这篇文章主要介绍Vue之bus数据传输优点以及弊端，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

Vue之bus数据传输优点以及弊端

一、优缺点

优点： 传递数据较为方便，可以进行兄弟之间，父子之间的传递
缺点： 必须先on监听才能进行emit触发

二、使用方法

2.1 自行创建Bus组件

创建一个名为Bus.js的公共组件
在这里插入图片描述

//抛出Bus 供传输数据的组件引用  代码-->>
import Vue from 'vue'
export default new Vue

引用组件
谁用谁引用
Library.vue 发送信息

import Bus from '../common/bus.js';
//触发，“changeCurrentMsg”为触发的信号名
Bus.$emit("changeCurrentPage",1);

Books.vue接受信息

import Bus from '../common/bus.js';
//创建时就要监听，也可以在created中监听
mounted(){
	Bus.$on("changeCurrentPage",(val)=>{
	                this.currentPage=val;
	       });
}

//记得销毁，不然会叠加调用监听
 beforDestroy（）{
         this.$bus.$off("vaPage");  //当这个组件销毁的时候bus也跟着一起销毁
}

2.2 使用vue-bus公共组件

和自定义创建bus的功能是一样的
优点： 避免重复的使用import导入bus.js文件
使用方法

1、安装：npm install vue-bus

2、在main.js中引入vue-bus

import Vue from 'vue';
import VueBus from 'vue-bus';
Vue.use(VueBus);

3、在组件中使用

//触发事件
this.$bus.emit("changeCurrentPage",1)；

//接受事件
mounted(){
	this.$bus.on("changeCurrentPage",(val)=>{
	           this.currentPage=val;
	    });
}
//组件销毁接触事件绑定
destroyed:function(){
　　this.$bus.off("changeCurrentPage")
}