说实话，我不知道怎么把标题写好。之前写过一篇关于vue-bus的文章，不过是基础版。今天，它类似于在搭建脚手架的环境中使用布线。我们得先把这辆巴士倒了。

说明如下：

npm安装vue总线

导入成功后，我们将使用它(或参考路线)

我们在代码中写道：

code class='language-html '从' vue-bus '导入总线Vue . use(bus)；/code是的，它非常像路由，所以毫无疑问。然后我们可以参考我的上一个模板。它仍然是三部曲，现在我们已经完成了部署环境的步骤，然后我们必须提交(emit方法)

这个。$巴士。$emit('password '，this . password)；然而，这里我们应该注意范围的问题(在es5写作下)。例如，在以下代码中：

methods1:函数(a){ console . log(a)；var _ this=this//转换为base64并显示在页面console.log(a.target.files[0])上；var image=新图像()；var reader=new FileReader()；reader . readasdataurl(a . target . files[0])；reader . onload=function(e){ console . log(e . target . result)；_ this . imglist[a . target . dataset . index]。img=e . target . result；}}，上面的代码是将文件转换为base64的代码。其中，当我们在最外层使用这个的时候，他的点就是我们想要的，包括这个组件的这个，但是当我们在onload函数中使用这个的时候，就会比较尴尬，所以我们不小心踩进去的这些坑应该避免

然后我们上去获取我们想要的信息，仍然使用on方法(类似地，如果我们使用once方法。它只有一次)

在很多情况下，因为on方法是监听，我们越早定义它越好，所以它基本上是在created中定义的

created:函数(){ console . log(this . show info)；var _ this=this这个。$巴士。$on('changes '，函数(a，b){ console . log(_ this . show info)；//this.showinfo[0]。text=' 2017-00-00 '；_this.showinfo=[{ text: '生日'，value:' 2017-01-01' }，{ text: '星座'，value: '白羊座' }，{text: '职业'，value:' it'}。_这个。$巴士。$on('showmyticket '，function(){ _ this . is show Barak _ black=true；_ this . is showmy ticket=true；});}，应该注意的是，这里还是那个坑的问题。如果不这样做，用了以后可能会有这种现象

这就是bug诞生的原因。这时，我们不得不考虑范围问题

基本上就是这样。与vuex相比，vue-bus更简单，不再局限于兄弟组件之间，也可以在父子级使用。但是请小心，因为是监听状态，所以使用emit的时候要小心。当然，我不会强迫你毁了这辆巴士。希望大家多多尝试。

以上vue-cli使用vue-bus进行全局控制的例子，都是边肖分享的内容，希望能给大家一个参考和支持。