vue非父子组件传值(bus)遇到的坑

vue非父子组件传值(bus)遇到的坑_第1张图片vue非父子组件传值(bus)遇到的坑_第2张图片
控制台可以打印出传递过来的值,但就是不会渲染到页面上但不会渲染到页面上那么重点来了!!!

在A销毁之前,B组件的beforeCreate ,created,和beforeMount这三个钩子函数先触发,之后才是A组件的销毁钩子的触发,因为总线Bus要求要先有监听在触发,才能成功监听,所以我们只能在A组件的beforeDestroy或者destroyed这两个生命周期钩子中触发函数emit,同理也只能在B组中的beforeCreate,created,和beforeMount这三个钩子函数中监听 emit,同理也只能在B组中的beforeCreate ,created,和beforeMount这三个钩子函数中监听emit,同理也只能在B组中的beforeCreate,created,和beforeMount这三个钩子函数中监听on。
vue非父子组件传值(bus)遇到的坑_第3张图片
vue非父子组件传值(bus)遇到的坑_第4张图片
页面渲染的值如下图所示
收到的值已经渲染到页面上
还是有之前重复触发的问题,还是会随着切换次数的增加而使监听函数触发的次数增加,解决这个问题就简单了。在我们用总线传值的时候要记得关闭监听,在B组件中的destroyed钩子中增加EventBus.$off方法即可,至此就没问题了。

你可能感兴趣的:(vue非父子组件传值(bus)遇到的坑)