Vue2-单一事件管理组件通信
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue2-单一事件管理组件通信相关的知识，希望对你有一定的参考价值。
对上篇文字【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>
以上就全部了，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。
以上是关于Vue2-单一事件管理组件通信的主要内容，如果未能解决你的问题，请参考以下文章
Vue2从入门到精通深入浅出，带你彻底搞懂Vue2组件通信的9种方式