vue-$bus使用解析

$bus

vue中解决父子组件间通信及事件相关的事务可以使用props&$ emit，那么解决跨级、兄弟、无相关关系组件间通信问题如何解决呢？方法有很多，这里讲解其中一种-$bus。
$bus作为vue中的一个中央事件总线bus，可以用于为组件传递数据。

vue-bus使用

安装

npm install vue-bus

引入

main.js中引入

import Vue from "vue";
import VueBus from "vue-bus";

Vue.use(VueBus);

使用

比如：页面头部header.vue中某个下拉框选择，需要把下拉选中项的值传给某***.vue中使用：
header.vue
这里用于发送变化的数据

<ul class="header">
	<li class="header-item" :class="{ selected: index === options.selected }" v-for="(item, index) of options.menuData" :key="index" @click="select(item.label)">
		<span class="header-title">{{ item.label }}</span>
        <ul class="header-submenu" v-if="item.submenu">
			<li class="header-submenu-item">
            	<span class="header-submenu-title" v-for="(subItem, index) of item.submenu" :key="index">{{ subItem.label }}</span>
	        </li>
		</ul>
	</li>
</ul>

<script>
	export default {
		methods: {
			select(data) {
				console.log(data);
				this.$bus.emit("select-item", data);
			}
		}
	}
</script>

***.vue
这里$bus.on实时监听数据，数据有变化则会自动执行一次。

<script>
	export default {
		mounted() {
			this.$bus.on("select-item", (data) => {
      			console.log("select-item", data);
      			this.activeName = data;
    		});
		}
	}
</script>