1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 <title>兄弟组件之间数据交互</title>
9 </head>
10
11 <body>
12 <div id="app">
13 <div>父组件</div>
14 <div>
15 <button @click='handle'>销毁事件</button>
16 </div>
17 <test-tom></test-tom>
18 <test-jerry></test-jerry>
19 </div>
20 </body>
21 <script src="../js/vue.js"></script>
22 <script>
23 //提供事件中心
24 var hub = new Vue();
25
26 Vue.component('test-tom', {
27 data: function () {
28 return {
29 num: 0
30 }
31 },
32 template: `
33 <div>
34 <div>TOM:{{num}}</div>
35 <div>
36 <button @click='handle'>点击</button>
37 </div>
38 </div>
39 `,
40 methods: {
41 handle: function () {
42 //传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据)
43 hub.$emit('jerry-event', 2);
44 }
45 },
46 mounted: function () {
47 // 监听事件
48 //接收数据方，通过mounted(){} 钩子中 触发hub.$on()方法名
49 hub.$on('tom-event', (val) => {
50 this.num += val;
51 });
52 }
53 });
54
55 Vue.component('test-jerry', {
56 data: function () {
57 return {
58 num: 0
59 }
60 },
61 template: `
62 <div>
63 <div>JERRY:{{num}}</div>
64 <div>
65 <button @click='handle'>点击</button>
66 </div>
67 </div>
68 `,
69 methods: {
70 handle: function () {
71 // 触发兄弟组件的事件
72 hub.$emit('tom-event', 1);
73 }
74 },
75 mounted: function () {
76 // 监听事件
77 hub.$on('jerry-event', (val) => {
78 this.num += val;
79 });
80 }
81 });
82
83 var vm = new Vue({
84 el: "#app",
85 data: {
86
87 },
88 methods: {
89 handle: function () {
90 hub.$off('tom-event');
91 hub.$off('jerry-event');
92 }
93 }
94 });
95 </script>
96
97 </html>