/vue-component-communication

这是一个vue组件传值的测试demo

Primary LanguageJavaScript

#一些奇怪的地方 vue每次加载路由进入一个组件都会 新建一个vue实例。每次新建的时候之前的实例一直会保存,不会消失。eg:一个组件B,每次通过路由进入,这个组件打印出来的this(vue实例)都不同,而且都不会消失。 如果从另一个组件A中emit一个时间,多次加载的组件B(通过vueBus传值)新建的vue实例,每一个实例都会收到值。

问题解决: 当我们还在页面A的时候,页面B还没生成,也就是页面B中的 created中所监听的来自于A中的事件还没有被触发。这个时候当你A中emit事件的时候,B其实是没有监听到的。

再看一下,红色的是B页面组件,当你从页面A到页面B跳转的时候,发生了什么?首先是先B组件先created然后beforeMount接着A组件才被销毁,A组件才执行beforeDestory,以及destoryed.

所以,我们可以把A页面组件中的emit事件写在beforeDestory中去。因为这个时候,B页面组件已经被created了,也就是我们写的$on事件已经触发了

所以可以,在beforeDestory的时候,$emit事件。