码迷,mamicode.com
首页 > 其他好文 > 详细

vue 非父子组件传值

时间:2018-11-11 17:55:08      阅读:140      评论:0      收藏:0      [点我收藏+]

标签:function   script   mit   eve   log   new   lang   eth   rom   

 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;

 

vue 非父子组件传值

标签:function   script   mit   eve   log   new   lang   eth   rom   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!