【vue任意组件传值】

第一步,我们需要新建一个js文件,用来创建一个Vue实例并暴露出去
【vue任意组件传值】
创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件。
假如,我们想要Home组件传递自身的msg属性给News组件,并在News组件中展示出来。
首先,需要在Home组件中导入我们刚创建的VueEvent。
【vue任意组件传值】
Home 组件 代码 如图所示
【vue任意组件传值】
创建一个按钮并设置事件
【vue任意组件传值】
在NewsEmit事件中,通过VueEvent.$emit(“to_news”,this.msg) 将 to_news 事件及数据一并发出。

News 组件 代码 如图所示
News 组件中同样需要引入 VueEvent
【vue任意组件传值】
【vue任意组件传值】
【vue任意组件传值】
mounted 是vue的生命周期函数中的其中一个,表示,页面加载完毕执行。
通过 $on 接收 事件,及数据,并赋值给msg,展示到视图中。

结果如图所示:
【vue任意组件传值】
点击按钮,数据展示。