vue中兄弟節點資料傳遞
阿新 • • 發佈:2018-12-14
在vue兄弟之間的資料傳遞,通過事件車(eventBus)釋出訂閱實現
vm.$on( event, callback )
$on中有兩個引數,一個event(事件名),一個callback(回撥函式,this指向window)
vm.$emit( event, val )
$emit中有兩個引數,一個event(事件名),一個val(需要傳遞的值)
let eventBus = new Vue; //事件車,用來連線兩個兄弟 let brother1 = { template:`<div>{{color}}<button @click="change">變綠</button></div>`, data(){ return{ color:"綠色", old:"綠色" } }, methods:{ change(){ eventBus.$emit("changeGreen",this.old) } }, created(){ eventBus.$on("changeRed",(val)=>{this.color=val}) } }; let brother2 = { template:`<div>{{color}}<button @click="changes">變紅</button></div>`, data(){ return{ color:"紅色", old:"紅色" } }, methods:{ changes(){ eventBus.$emit("changeRed",this.old) } }, created(){ eventBus.$on("changeGreen",(val)=>{this.color=val}) } }; new Vue({ el:"#app", components:{ brother1, brother2 } })