Vue2-單一事件管理組件通信
阿新 • • 發佈：2017-11-26
doc cli itl return send 數據 文字 b數 one
對上篇文字【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-單一事件管理組件通信