1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Vue</title> 6 <style> 7 8 </style> 9 </head> 10 <body> 11 <div id="app"> 12 <p>{{ message }}</p> 13 <a-component></a-component> 14 </div> 15 <!-- 开发环境版本，包含了用帮助的命令行警告 --> 16 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 17 <script type="text/javascript"> 18 var bus = new Vue(); 19 Vue.component('a-component',{ 20 template: '<button @click="handleEvent">点击获取</button>', 21 methods: { 22 handleEvent: function() { 23 bus.$emit('on-message', 'hello world') 24 } 25 } 26 }) 27 var app = new Vue({ 28 el:'#app', 29 data: { 30 message: '' 31 }, 32 mounted: function() { 33 var _this = this; 34 bus.$on('on-message', function(msg) { 35 _this.message = msg; 36 }) 37 } 38 39 }); 40 41 </script> 42 </body> 43 </html>
vue 非父子组件通信
猜你喜欢
转载自www.cnblogs.com/1032473245jing/p/9232811.html
今日推荐
周排行