vue总线机制(bus)知识点详解
更新时间：2020年05月10日 17:12:34 作者：csdn
在本篇文章中小编给大家整理的是关于vue总线机制(bus)知识点总结，有兴趣的朋友们可以跟着学习下。
vue中非父子组件之间通信除了使用vuex，也可以通过bus总线，两者适用场景不同。
bus适合小项目、数据被更少组件使用的项目，对于中大型项目 数据在很多组件之间使用的情况 bus就不太适用了。bus其实就是一个发布订阅模式，利用vue的自定义事件机制，在触发的地方通过$emit向外发布一个事件,在需要监听的页面，通过$on监听事件。
vuex适用中大型项目、数据在多组件之间公用的情况。
简单介绍两者的区别之后，就要介绍下我在一个项目中遇到的一个场景了，这个场景使用bus可能更加适合些：
//main.js
Vue.prototype.bus = new Vue();
new Vue({
render: h => h(App)
...
}).$mount('#app');
/*
*通过把一个vue实例赋于Vue构造函数原型上的一个属性bus（当然起任何名称都是可以的）
*而每个Vue实例都是有$emit和$on方法的
*由于bus属性在Vue原型上，根据原型链查找规则，在页面中我们就可以通过 this.bus.$emit 和
*this.bus.$on来进行跨组件通信了
*/
//导航栏组件中
//点击事件发生时发布一个事件
this.bus.$emit('even-name'，args1, arg2 , ...)
//这里我们可以把点击导航的相关信息携带出去
//路由显示页面中
this.bus.$on('event-name', (...args) => {
//根据参数来进行路由跳转
})
这个事件监听 和 路由跳转的逻辑我们可以弄成一个mixins进行复用。到这样就完成了。
但是这样还是有点麻烦，每个页面都需要引入mixins，有没有更好的办法呢？答案是肯定的。我们项目导航栏是通过路由meta循环出来的，每项有对应导航栏的路由，结构如下：
{
path: '/xxxx',
component: xxxx,
meta: [
{
name: '导航1'
},
{
name: '导航2',
url: '我是导航2的路由'
},
{
name: '导航3',
url: '我是导航3的路由'
},
{
name: '导航4',
}
]
},
在思索时我忽然发现每个导航栏的index、导航栏长度length、及router.go方法之间有一个规律，那就是我们可以把index + 1 - length作为router.go的参数，从而不用再关心query参数了，而且只需要在导航栏组件操作一次就可以了，完美！
//导航栏组件点击事件处理函数中
if (url) {
const meta = this.$route.meta;
this.$router.go(index + 1 - meta.length)
}
知识点补充：
将Bus注入到Vue根对象中
import Vue from 'vue'
const Bus = new Vue()
var app= new Vue({
el:'#app',
data:{
Bus
}
})
在子组件中通过this.$root.Bus.$on(),this.$root.Bus.$emit()来调用
以上就是vue总线机制(bus)知识点详解的详细内容，更多关于vue中总线机制的资料请关注脚本之家其它相关文章！
相关文章
vue清除浏览器全部cookie的问题及解决方法(绝对有效!)
最近项目要实现关闭浏览器清除用户缓存的功能,下面这篇文章主要给大家介绍了关于vue清除浏览器全部cookie的问题及解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
el-input框是Element UI库中的一个输入框组件，用于接收用户的输入，这篇文章主要介绍了el-input限制输入正整数,需要的朋友可以参考下2024-02-02
最近被问起是否了解vue的插槽（slot），咋一想发现，似乎很少用到这玩意。所以整理了下slot的一些用法2022-08-08
这篇文章主要给大家介绍了关于vue中利用three.js实现全景图的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
使用Vue3和Plotly.js打造一个3D图在线展示的实现步骤
三维网格图广泛应用于科学可视化、医学成像、工程设计等领域,用于展示复杂的数据结构和空间分布,本文给大家介绍了使用Vue3和Plotly.js打造一个3D图在线展示的实现步骤,文中有详细的代码示例供大家参考,需要的朋友可以参考下2024-07-07
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
这篇文章主要介绍了Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-09-09
这篇文章主要介绍了构建大型 Vue.js 项目的10条建议(小结)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
axios 是一个基于promise的HTTP库,支持promise所有的API,本文给大家介绍Vue3全局配置Axios并解决跨域请求问题,内容从axios部署开始到解决跨域问题,感兴趣的朋友一起看看吧2023-11-11
Vue是当前很火的一款MVVM的轻量级框架，它是以数据驱动和组件化的思想构建的。因为它提供了简洁易于理解的api，使得我们很容易上手。这篇文章给大家介绍了vue双向数据绑定问题，感兴趣的朋友一起看看吧2017-10-10
今天小编就为大家分享一篇vue主动刷新页面及列表数据删除后的刷新实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论