vue 非父子组件通信 

 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>

 

posted @ 2018-06-27 10:49  铜镜123  阅读(132)  评论(0)    收藏  举报