1. 程式人生 > >vue中兄弟節點資料傳遞

vue中兄弟節點資料傳遞

在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
    }
})