第一种方法:
通过给vue实例添加自定义属性
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>非父子组件传值(bus)</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <child :msg="first"></child> <child1 :msg="last"></child1> </div> <script> /* * Vue.prototype.busb为自定义的属性 可以是a,b也可以c,d等等 * */ Vue.prototype.bus=new Vue(); var child={ template:"<div @click='brother'>{{message}}</div>", data(){ return{ message:this.msg } }, props:{ msg:String }, methods:{ brother(){ this.bus.$emit("change",this.message) } }, mounted(){ var _this=this; this.bus.$on("change1",function(info){ alert(_this.message+info) }) } } var child1={ template:"<div @click='brother1'>{{message}}</div>", data(){ return{ message:this.msg } }, props:{ msg:String }, methods:{ brother1(){ this.bus.$emit("change1",this.message) } }, mounted(){ var _this=this; this.bus.$on("change",function(info){ alert(_this.message+info) }) } } var app=new Vue({ el:"#app", data:{ first:"张三", last:"李四" }, components:{ child:child, child1:child1 }, }) </script> </body> </html>
第二种方法:eventHub
在公共组件创建vue实例,一般都在app.Vue的data里定义eventHub:new Vue(),然后通过provide抛出,其他组件通过inject注入eventHub,然后分别通过evenHub.emit与eventHub.$on触发与监听
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>非父子组件传值2(eventHub)</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <button @click="getRandom">Send a message to the child component</button> <one></one> </div> <script> var two={ template:"<div>{{twoInfo}}</div>", data(){ return { twoInfo:"" } }, inject:['eventHub'], created(){ var _this=this; this.eventHub.$on("send",function(msg){ _this.twoInfo=msg; }) } } var one={ template:"<div>{{oneInfo}}<two></two></div>", inject:['eventHub'], data(){ return{ oneInfo:"" } }, created(){ var _this=this; this.eventHub.$on("send",function(msg){ _this.oneInfo=msg; }) }, components:{ two:two } }; var app=new Vue({ el:"#app", data:{ eventHub:new Vue() }, provide(){ return { eventHub:this.eventHub } }, components:{ one:one }, methods:{ getRandom(){ this.eventHub.$emit("send", Math.random()) } } }) </script> </body> </html>
以上代码为本地,不需要node启服务之类的,运行需要下载vue.js文件,修改你的src路径即可!