Vue非父子组件传值

假如我们有两个子组件：Blog.vue 和News.vue 它们同为兄弟组件

我想实现News组件数据传递给Blog组件，

步骤如下：

1、创建一个js文件：VueEvent.js 代码如下：

import Vue from 'vue';

var VueEvent=new Vue();

export default VueEvent;

2、在New引入 上一步js文件，并且广播数据

代码如下：

<template>
<div id="newapp">
<h1>我是新闻</h1>
<button @click="emitblog()">广播数据</button>
 
 </div>
</template>

<script>
import VueEvent from '../models/VueEvent.js';
export default {
   name:'mynews',
    data () {
        return {
         msg:'新闻传递过来的数据122'
        }
    }
    ,methods:{
        emitblog() {
            alert(1);
            //广播数据
            VueEvent.$emit("new-data",this.msg);
        }
    }
   

}
</script>

3、在blog里获取也引入步骤2js文件，并且获取数据

<template>
<div id="homeapp">
<h1>我是blog</h1>
 
 </div>
</template>

<script>
import VueEvent from '../models/VueEvent.js';
export default {
   name:'myblog',
    data () {
        return {
         msg:'blog'
        }
    }
     ,mounted() {
         //获取数据
            VueEvent.$on("new-data",function(data){
         alert(data);

      });
        }
   

}
</script>