Vue学习之非父子组件的传值

Vue中非父子组件的传值在这里我给出四步，步骤如下：

1.新建一个js文件—>然后引入vue—>实例化vue—>暴露这个实例

VueEvent.js

import Vue from 'vue'

var VueEvent = new Vue();

export default VueEvent;

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

3.通过 VueEvent.$emit(‘名称’,数据) 此方法来广播

Home.vue

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

        <br>
        <!--v-on:click-->
        <button @click="emitNews()">给news组件广播数据</button>

    </div>
</template>  

<script>
//引入  vue实例
import VueEvent from '../model/VueEvent.js'
export default {
    data(){
        return {
            msg:'我是一个home组件',
            title:'今天 2019/2/21'
        }
    },
    methods:{
        emitNews(){
            //  广播数据

            VueEvent.$emit('to-news',this.msg)
        }
    },
    mounted(){
        //监听news广播的数据
        VueEvent.$on('to-home',function(data){
            console.log(data);
        })
    }
    
}
</script>

4.在接收数据的地方通过 $on 接收广播的数据

VueEvent.$on(‘名称’,function(){
})

News.vue

<template>
 <!-- 所有的内容要被根节点包含起来-->
 <div id="news">
     我是一个新闻组件
     <br>
     <button @click="emitHome()">给home组件广播数据</button>

 </div>
</template>

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

export default {
 data(){
     return {
         msg:'我是一个news组件',
     }
 },
 methods:{
     emitHome(){
         //广播
         VueEvent.$emit('to-home',this.msg)
     }
 },

 mounted(){
     VueEvent.$on('to-news',function(data){
         console.log(data);
     })
 }
 
}
</script>

5.接下来是App.vue根节点和我的项目目录（方便大家查阅）

App.vue

<template>
  <div id="app">
   
   <v-home></v-home>
   <br>
   <hr>
   <br>
   <v-news></v-news>
  </div>
</template>

<script>
import Home from './components/Home.vue';
import News from './components/News.vue';

export default {
  name: 'App',
  data(){
    return{
      msg:'你好vue'
    }
  },
  components:{ /*前面的组件名称不能和HTML标签一样 */
    'v-home':Home,
    'v-news':News
  }
}
</script>

<style>

</style>

最后的页面效果是这样的：

非父子组件传值较为麻烦，一般用到的地方也不是很多，但是在有些面试的时候会有（这是老师说的）。
关于非父子组件的传值详细请参考官方文档 https://cn.vuejs.org/， 若有任何疑问或是不解，请在下方评论，谢谢！