vue组件传值之bus篇

不只是父子级页面会有通信，有时候两个组件也需要通信（非父子关系，即使没有任何依赖关系的页面也可以使用）

新建bus总线

在main.js下新建bus.js

import Vue from 'vue'
export default new Vue();

触发Bus.$emit

在b页面将值传给a页面

<template>
	<div @click="onfocus"></div>
</template>

<script>
    import Bus from '@/bus.js'
    
	export default{
		methods:{
	    	onfocus:function(fromid){
		    	Bus.$emit('getBData',"要传输的内容，可以为字符串也可以为对象")
		     }
	    }
	}
</script>

监听Bus.$on

在a页面监听b页面传过来的值.getisshow

<script>
    import Bus from '@/bus.js'
    
	export default{
		created(){
			Bus.$on('getBData',data => {
				console.log(data)   //接收到的data为"要传输的内容，可以为字符串也可以为对象"
			})
		}
	}
</script>

销毁Bus.$off

我是放在传值前去销毁bus总线，在b页面的beforeCreate钩子里使用

<template>
	<div @click="onfocus"></div>
</template>

<script>
    import Bus from '@/bus.js'
    
	export default{
		methods:{
	    	onfocus:function(fromid){
		    	Bus.$emit('getBData',"要传输的内容，可以为字符串也可以为对象")
		     }
	    },
	    beforeCreate() {
		    Bus.$off("getBData");
		  },
	}
</script>

使用bus总线可能会遇到的问题
1，页面的组件遇到获取不到值的情况，触发和监听的对象是否为同一个
2，第一次获取不到值的情况，查看监听函数是否在触发函数之前存在 （a页面写的监听，一定要先于b页面的传值）

后期遇到补充…