Vue非父子組件傳值

假如咱們有兩個子組件：Blog.vue 和News.vue 它們同爲兄弟組件

我想實現News組件數據傳遞給Blog組件，

步驟以下：

一、建立一個js文件：VueEvent.js 代碼以下：

import Vue from 'vue';

var VueEvent=new Vue();

export default VueEvent;

二、在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>

三、在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>