Vue非父子組件傳值

<template>


  <div id="app"> 
    

     <v-home></v-home>

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

  </div>
</template>

<script>

  /*非父子組件傳值
  一、新建一個js文件   而後引入vue  實例化vue  最後暴露這個實例


  二、在要廣播的地方引入剛纔定義的實例


  三、經過 VueEmit.$emit('名稱','數據')


  四、在接收收數據的地方經過 $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;