## [觀察者模式]()實現非父子組件的傳值 >思路 ~~~ 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" } }) ~~~