标签: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;
标签:function script mit eve log new lang eth rom
原文地址:https://www.cnblogs.com/sulanlan/p/9942680.html