vue30-單一事件管理組件通信: vuex
阿新 • • 發佈：2017-06-12
vue doc 實例 eve cap put init bind http
------------------------------------------------------
可以單一事件管理組件通信: vuex
var Event=new Vue();
Event.$emit(事件名稱, 數據)
Event.$on(事件名稱,function(data){
//data
}.bind(this));
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> //準備一個空的實例對象 var Event=new Vue(); var A={ //A組件 template:` <div> <span>我是A組件</span> -> {{a}} <input type="button" value="把A數據給C" @click="send"> </div> `, methods:{ send(){ Event.$emit(‘a-msg‘,this.a); } }, data(){ return { a:‘我是a數據‘ } } }; var B={ template:` <div> <span>我是B組件</span> -> {{a}} <input type="button" value="把B數據給C" @click="send"> </div> `, methods:{ send(){ Event.$emit(‘b-msg‘,this.a); } }, data(){ return { a:‘我是b數據‘ } } }; var C={ template:` <div> <h3>我是C組件</h3> <span>接收過來的A的數據為: {{a}}</span> <br> <span>接收過來的B的數據為: {{b}}</span> </div> `, data(){ return { a:‘‘, b:‘‘ } }, mounted(){ //var _this=this; //接收A組件的數據 Event.$on(‘a-msg‘,function(a){ this.a=a; }.bind(this)); //接收B組件的數據 Event.$on(‘b-msg‘,function(a){ this.b=a; }.bind(this)); } }; window.onload=function(){ new Vue({ el:‘#box‘, components:{ ‘com-a‘:A, ‘com-b‘:B, ‘com-c‘:C } }); }; </script> </head> <body> <div id="box"> <com-a></com-a> <com-b></com-b> <com-c></com-c> </div> </body> </html> <!-- 我是A組件 -> 我是a數據 把A數據給C 我是B組件 -> 我是b數據 把B數據給C 我是C組件 接收過來的A的數據為: 我是a數據 接收過來的B的數據為: 我是b數據 -->
vue30-單一事件管理組件通信: vuex