Vue后台更新页面缓存

Vue后台项目开发工作中，遇到这样一个问题：从列表页打开编辑页，在编辑页面修改完数据后，回到列表页，被修改的列表项并没有更新。这是Vue的缓存机制，如果想在编辑页面修改完数据并刷新列表页面的缓存，需要在组件之间传值，来更新对应的数据缓存。

利用组件之间传值，更新对应的数据缓存，机制和兄弟组件之间传值非常相似，都是通过$emit；

原理是：vue一个新的实例，类似于一个站，连接着两个组件，也就是一个中央事件总线；

1.新建一个bus实例：

2.创建一个firstChild组件，引入bus,接着一个按绑定数据传输事件：

我们通过一个$emit自定义一个事件，并传递数据；

$emit实例方法触发当前实例(这里的当前实例就是bus)上的事件,附加参数都会传给监听器回调。

3.下面是另一个组件，引入bus实例，通过一个p标签接收数据：

这个组件的mounted里，我们监听了userDefinedEvent事件，并把传递过来的事件通过$on监听回调函数；

on:监听当前实例上的自定义事件(此处当前实例为bus)。事件可以由emit触发，回调函数会接收所有传入事件触发函数($emit)的额外参数。

接下来就是展示真正的效果的时候了：

点击之后：

1，首先创建一个事件总线，例如bus，作为一个通讯的桥梁；
2，在需要传值的组件中，通过emit 触发一个自定义事件，并传递参数 ；
3，在接收数据的组件中，通过on监听自定义事件，并处理传递过来的参数；