一开始的需求是这样子的，我为了实现两个页面组件之间的数据传递，假设我有页面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, date, 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, '这是从上个页面传递过来的参数')
}
}
就当我欣喜若狂的时候，觉得自己只要在页面A触发了get事件，页面B中就会理所当然的接受了数据。然而，结果却不如人意，看一下下面的动图。
主要是看“”这是从上个页面传来的数据这一行数据的输出次数情况来判断事件触发次数。“”
不知道你有没有发现，就是我第一次进去list页面的时候，我随便点击一下list下的任何一个item，控制台没有输出。但是当我第二次再点击触发事件的时候，就会输出一个测试数据。再一次进去点击，就输出两个数据。。。依次增加了。（控制台上那个“这是从上个页面传来的数据”就是测试数据）
所以，有两个问题。
问题：
- 问题1： 为什么第一次触发的时候页面B中的on事件没有被触发
- 问题2： 为什么后面再一次依次去触发的时候会出现，每一次都会发现好像之前的on事件分发都没有被撤销一样，导致每一次的事件触发执行越来越多。
解决
针对问题1
这个还得从vue的生命周期说起了，我先进行了测试，就是当从页面组件A跳转到页面组件B的时候，两个组件的生命周期分别是怎么样的，关于vue的生命周期具体每一个时期做什么事情我就不再赘述了，下面po一张vue生命周期的图。