vue组件通讯之非父子组件通讯

什么顺序不顺序的。。

先来讲说非父子组件通讯。

首先，咱们先来了解下vue中的

1.$emit  触发当前实例上的事件，附加参数都会传给监听器回调。

2.$on  监听当前实例上的自定义事件。事件能够由vm.$emit触发。回调函数会接收全部传入事件触发函数的额外参数。

基础知识准备好了，下面，咱们就来实现非父子组件之间是怎样通讯的：

第一步，咱们须要新建一个js文件，用来建立一个Vue实例并暴露出去

建立一个事件中心，至关于中转站，能够用它来传递事件和接收事件

假如，咱们想要Home组件传递自身的msg属性给News组件，并在News组件中展现出来。

首先，须要在Home组件中导入咱们刚建立的VueEvent

 

Home 组件 代码 如图所示

 建立一个按钮并设置事件

 

在NewsEmit事件中，经过VueEvent.$emit("to_news",this.msg) 将 to_news 事件及数据一并发出

 News 组件  代码 如图所示

News 组件中一样须要引入 VueEvent

 

 

 

 mounted 是vue的生命周期函数中的其中一个，表示，页面加载完毕执行。

经过 $on 接收 事件，及数据，并赋值给msg，展现到视图中。

结果如图所示：

点击按钮，数据展现。

 

未完，待续