vue中eventbus被多次触发以及踩过的坑

大佬教程收集整理的这篇文章主要介绍了vue中eventbus被多次触发以及踩过的坑，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

一开始的需求是这样子的，我为了实现两个页面组件之间的数据传递，假设我有页面A，点击页面A上的某一个按钮之后，页面会自动跳转到页面B，同时我希望将页面A上的某一些参数携带过去给页面B。（我知道，小参数的时候可以通过路由的params或者query去传参数，或者大型数据可以用vuex来处理，很遗憾我到现在还没有做很大型的项目，所以还没有用过vuex，接下来会学习一下。）

然后我就想，这不就是不同组件之间的数据传递问题而已吗？直接用bus 巴士事件来传递数据不就行了吗。于是，我就很愉快地进行了。关于vue中的eventbus的使用，我之前在一篇vue中的数据传递中有提到过。

先给你们看一下我一开始的代码：

实现目标：

点击之后，bus emit事件，然后顺便跳转路由到/moneyRecord页面。

接下来就是在MoneyRecord页面中去on接收这个事件，然后接受参数。

页面A的内部触发bus事件的代码 editList (index,date,item) { // 点击进入编辑的页面，需要传递的参数比较多。 console.log(index,item) bus.$emit('get',{ item: item.type,date: date }) this.$router.replace({path: '/moneyRecord'}) }

// moneyRecord页面
created () {
//这里我将icon的list给保存下来了
bus.$on('get',this.myhandle)
},methods: {
myhandle (val) {
console.log(val,'这是从上个页面传递过来的参数')
}
}

大佬总结

以上是大佬教程为你收集整理的vue中eventbus被多次触发以及踩过的坑全部内容，希望文章能够帮你解决vue中eventbus被多次触发以及踩过的坑所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。