image.png

步骤：
1、创建一个新的js文件。
2、引入一个空的VUE实例（新的js文件中）。
import Vue from 'vue'//引入vue实例
3、实例化引入的空实例（新的js文件中）。
let VueEvent=new Vue();
4、将VueEvent暴露出去（新的js文件中）。
export default VueEvent;

image.png

5、再发送端和接收端均引入之前实例化的空Vue实例。

image.png

6、痛快地发送与接收：

image.png

代码：

App.vue:


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

<script>
import Home from './components/Home.vue';
import News from './components/News.vue';
export default {
name: 'App',
data (){
return{
msg:'你好！',
}
},
methods:{

},
components:{
  'v-home':Home,
  'v-news':News,
}

}
</script>

<style>

app {

font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
margin-top: 60px;
}
</style>

VueEvent.js:
import Vue from 'vue'//引入vue实例
let VueEvent=new Vue();
export default VueEvent;

Home.vue:
<template>
<div>
<h2>我是一个首页组件</h2>
<button @click="EmitNews()">给News组件广播数据</button>
</div>
</template>

<script>
import VueEvent from '../model/VueEvent.js';
export default {
name: "home",
data(){
return {
msg:'首页组件',
title:123,
}
},
methods:{
EmitNews(){//给News组件广播数据
VueEvent.on('to_home',(data)=>{
alert(data)
})
}
}
</script>

<style scoped lang="scss">
h2{
color:red;
}
</style>

News.vue:
<template>
<div>
<h2>我是一个新闻组件</h2>
<button @click="EmitHome()">给Home组件广播数据</button>
</div>
</template>

<script>
import VueEvent from '../model/VueEvent.js';
export default {
name: "news",
data(){
return {
msg:'新闻组件',
}
},
methods:{
EmitHome(){
VueEvent.on('to_news',(data)=>{
alert(data)
})
}
}

</script>

<style scoped>

</style>