vue 非父子组件传值

Posted 2021-01-19 sulanlan

 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;