Vue非父子组件传值

<template>

  <div id="app"> 

     <v-home></v-home>

    <br>
    <hr>
    <br>
    <v-news></v-news>

  </div>
</template>

<script>

  /*非父子组件传值
  1、新建一个js文件   然后引入vue  实例化vue  最后暴露这个实例

  2、在要广播的地方引入刚才定义的实例

  3、通过 VueEmit.$emit('名称','数据')

  4、在接收收数据的地方通过 $om接收广播的数据
    VueEmit.$on('名称',function(){

    })

  */

   import Home from './components/Home.vue';

   import News from './components/News.vue';

   export default {
      data () {
        return {

         msg:'你好vue'
        }
      },
      components:{   /*前面的组件名称不能和html标签一样*/
        'v-home':Home,
        'v-news':News
      }

    }
</script>

<style lang="scss">

</style>

<template>
    <!-- 所有的内容要被根节点包含起来 -->
    <div id="home">

       我是首页组件

       <br>

       <button @click="emitNews()">给News组件广播数据</button>

        <br>

    </div>

</template>

<script>

//引入 vue实例

    import VueEvent from '../model/VueEvent.js';

    export default{
        data(){
            return {
               msg:'我是一个home组件',
               title:'首页111'
            }
        },methods:{

            emitNews(){
                //广播数据

                VueEvent.$emit('to-news',this.msg)

            }
        },
        mounted(){

            //监听news 广播的数据
            VueEvent.$on('to-home',function(data){
                console.log(data);
            })
        }

    }

</script>

<style lang="scss" scoped>

</style>

<template>
    <div id="news">

       我是新闻组件
        <br>

       <button @click="emitHome()">给Home组件广播数据</button>

        <br>
    </div>

</template>

<script>
//引入 vue实例
    import VueEvent from '../model/VueEvent.js';

    export default{
        data(){
            return {
               msg:'我是一个新闻组件'
            }
        },
        methods:{
            emitHome(){ 

                //广播

                VueEvent.$emit('to-home',this.msg)
            }

        },
        mounted(){

            VueEvent.$on('to-news',function(data){
                console.log(data);
            })
        }

    }

</script>

<style lang="scss" scoped>

</style>

model/VueEvent.js

import Vue from 'vue';
var VueEvent = new Vue()
export default VueEvent;