对上篇文字【vue2.0 中#$emit,$on的使用详解】的实例运用：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <title>Vue2-单一事件管理组件通信</title>
6 <script src="vue.js"></script>
7 <script type="text/javascript">
8 /**
9 *
10 */
11 //准备一个空的实例对象
12 var vm = new Vue();
13 /*----------------------------------组件A-------------------------------------------------*/
14 //组件A
15 var A = {
16 template: `
17 <div>
18 <span>我是A组件的数据->{{a}}</span>
19 <input type="button" value="把A数据传给C" @click = "send">
20 </div>
21 `,
22 methods: {
23 send () {
24 vm.$emit("a-msg", this.a);
25 }
26 },
27 data () {
28 return {
29 a: "我是a组件中数据"
30 }
31 }
32 };
33 /*----------------------------------组件B-------------------------------------------------*/
34 //组件B
35 var B = {
36 template: `
37 <div>
38 <span>我是B组件的数据->{{a}}</span>
39 <input type="button" value="把B数据传给C" @click = "send">
40 </div>
41 `,
42 methods: {
43 send () {
44 vm.$emit("b-msg", this.a);
45 }
46 },
47 data () {
48 return {
49 a: "我是b组件中数据"
50 }
51 }
52 };
53 /*----------------------------------组件C-------------------------------------------------*/
54 //组件C
55 var C = {
56 template: `
57 <div>
58 <h3>我是C组件</h3>
59 <span>接收过来A的数据为: {{a}}</span>
60 <br>
61 <span>接收过来B的数据为: {{b}}</span>
62 </div>
63 `,
64 mounted () {
65 //接收A组件的数据
66 vm.$on("a-msg", function (a) {
67 this.a = a;
68 }.bind(this));
69
70 //接收B组件的数据
71 vm.$on("b-msg", function (a) {
72 this.b = a;
73 }.bind(this));
74 },
75 data () {
76 return {
77 a: "",
78 b: ""
79 }
80 }
81 };
82 window.onload = function () {
83 new Vue({
84 el: "#box",
85 components: {
86 "dom-a": A,
87 "dom-b": B,
88 "dom-c": C
89 }
90 });
91 };
92
93 </script>
94 </head>
95 <body>
96 <div id="box">
97 <dom-a></dom-a>
98 <dom-b></dom-b>
99 <dom-c></dom-c>
100 </div>
101 </body>
102 </html>
以上就全部了，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。
时间： 2024-08-29 02:20:21