一 创建测试项目

vue init webpack-simple vuedemo

二 进入demo目录

cd vuedemo

三 安装依赖

cnpm install

四 修改代码

要修改的文件
├── src
│ ├── App.vue
│ ├── components
│ │ ├── Home.vue
│ │ └── News.vue
│ └── model
│ └── VueEvent.js

App.vue

<template>
  <div id="app">
    <v-home></v-home>
    <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:'hello vue world!',     
    };
  },
  components:{
    'v-home':Home,
    'v-news':News
  },
};
</script>

<style>

</style>

Home.vue

<template>
    <!-- all content need in root-->
    <div id="home">      
        {{msg}} 
        <br>
        <button @click="emitNews()">send message to News Page </button>
    </div>
</template>


<script>

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

export default {
    data(){
        return {
            msg:'i am home component!'
        }
    },
    methods:{
        emitNews(){
            VueEvent.$emit('to-news', this.msg)
        }
    },
    mounted(){
        VueEvent.$on('to-home', function(data){
            console.log(data)
        })
    }
}
</script>

<style>

</style>

News.vue

<template>
    <!-- all content need in root-->
    <div id="news">      
        {{msg}} 
        <br>
        <button @click="emitHome()">send message to Home Page </button>
    </div>
</template>


<script>

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

export default {
    data(){
        return {
            msg:'i am news component!'
        }
    },
    methods:{
        emitHome(){
            VueEvent.$emit('to-home', this.msg)
        }
    },
    mounted(){
        VueEvent.$on('to-news', function(data){
            console.log(data)
        })
    }
}
</script>

<style>

</style>

VueEvent.js

import Vue from 'vue';

var VueEvent = new Vue();

export default VueEvent;

五 运行

npm run dev

image.png

六 总结

1Vue非父子组件传值
《1 创建js文件，引入vue，实例化vue，暴露这个实例

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

《2 在要广播的地方引入定义的实例

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

《3 通过VueEvent.$emit('名称', '数据')

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

《4 在接受数据的地方通过$on监听

export default {
    data(){
    },
    mounted(){
        VueEvent.$on('to-home', function(data){
            console.log(data)
        })
    }
}

七 参考

https://cn.vuejs.org/v2/guide/components-custom-events.html