## [观察者模式]()实现非父子组件的传值 >思路 ~~~ 1.给Vue.prototype一个bus属性 Vue.prototype.bus = new Vue(); 2.给bus属性一个自定义事件 this.bus.$emit("change") 3.当组件装载的时候触发 mounted(){ this.bus.$on('change',msg=>{ }) } ~~~ ~~~ <div id="app"> <child content="Dell"></child> <child content="Lee"></child> </div> ~~~ ~~~ /* 给每一个vue实例增加一个bus属性 */ Vue.prototype.bus = new Vue(); Vue.component('child',{ props:['content'], data(){ return { selfContent:this.content } }, template:"<div @click='handleClick'>{{selfContent}}</div>", methods:{ handleClick(){ console.log(this); /* 在bus属性上增加一个change方法 */ this.bus.$emit('change',this.content) } }, /* 组件被装载的时候触发 */ mounted() { this.bus.$on('change',(msg)=>{ this.selfContent= msg }) }, }) var vm = new Vue({ el:"#app", data:{ content:"good" } }) ~~~