vue 非父子组件传值

 1 <template>
 2     <div id="news">
 3
 4        我是新闻组件
 5         <br>
 6
 7        <button @click="emitHome()">给Home组件广播数据</button>
 8
 9         <br>
10     </div>
11
12 </template>
13
14
15 <script>
16 //引入 vue实例
17     import VueEvent from ‘../model/VueEvent.js‘;
18
19     export default{
20         data(){
21             return {
22                msg:‘我是一个新闻组件‘
23             }
24         },
25         methods:{
26             emitHome(){
27
28                 //广播
29
30                 VueEvent.$emit(‘to-home‘,this.msg)
31             }
32
33         },
34         mounted(){
35
36             VueEvent.$on(‘to-news‘,function(data){
37                 console.log(data);
38             })
39         }
40
41     }
42
43 </script>
44
45 <style lang="scss" scoped>
46
47 </style>

上面是新闻组件

下面是home组件

 1 <template>
 2     <!-- 所有的内容要被根节点包含起来 -->
 3     <div id="home">
 4
 5        我是首页组件
 6
 7        <br>
 8
 9        <button @click="emitNews()">给News组件广播数据</button>
10
11         <br>
12
13     </div>
14
15 </template>
16
17
18 <script>
19
20 //引入 vue实例
21
22
23     import VueEvent from ‘../model/VueEvent.js‘;
24
25     export default{
26         data(){
27             return {
28                msg:‘我是一个home组件‘,
29                title:‘首页111‘
30             }
31         },methods:{
32
33             emitNews(){
34                 //广播数据
35
36                 VueEvent.$emit(‘to-news‘,this.msg)
37
38             }
39         },
40         mounted(){
41
42             //监听news 广播的数据
43             VueEvent.$on(‘to-home‘,function(data){
44                 console.log(data);
45             })
46         }
47
48     }
49
50 </script>
51
52 <style lang="scss" scoped>
53
54
55
56 </style>

下面是VueEvent.js

1 import Vue from ‘vue‘;
2
3
4 var VueEvent = new Vue()
5
6
7
8 export default VueEvent;

原文地址：https://www.cnblogs.com/sulanlan/p/9942680.html