刚学的vue.js的单一事件管理组件通信
第一次在博客园写的技术分享,写的不好的话各位大神多体谅,好啦进入主题
说说思路
首先
第一步,准备一个空的示例对象
var Event=new Vue();
第二步,准备发送的数据
Event.$emit(事件名称,数据)
第三步,接收数据
Event.$on(事件名称,function(data){
// data
}.bind(this));
具体代码实现效果如下;
var Event = new Vue(); var 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>-->{{b}} <input type='button' value='把B数据给C' @click='send'> </div>`, methods:{ send(){ Event.$emit('b-msg',this.b) } }, data(){ return { b:'我是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; }); // 另一种使用this方法 // Event.$on('a-msg',function(a){ // this.a= a; // }.bind(this)); //接收B的数据 Event.$on('b-msg',function(b){ _this.b= b; }); } }; window.onload = function(){ new Vue({ el:'#box', components:{ 'com-a':A, 'com-b':B, 'com-c':C } }) }
html部分
<div id="box"> <com-a></com-a> <com-b></com-b> <com-c></com-c> </div>