從同級組件Vue.JS更改組件數據的狀態2.0

Question

考慮：

<parent-element> 
    <sibling-a></sibling-a> 
    <sibling-b></sibling-b> 
</parent-element> 

我如何才能訪問到click事件上siblingA一個按鈕，一些值更改爲另一個兄弟-B，使用$發出？

Answer 1

對於您可以簡單地使用全局總線，放出到您的活動：

var bus = new Vue(); 

Vue.component('comp-a', { 
    template: `<div><button @click="emitFoo">Click Me</button></div>`, 
    methods: { 
    emitFoo() { 
     bus.$emit('foo'); 
    } 
    } 
}); 

Vue.component('comp-b', { 
    template: `<div>{{msg}}</div>`, 
    created() { 
    bus.$on('foo',() => { 
     this.msg = "Got Foo!"; 
    }) 
    }, 
    data() { 
    return { 
     msg: 'comp-b' 
    } 
    } 
}); 

這裏的的jsfiddle：https://jsfiddle.net/6ekomf2c/

如果你需要做的事情比較複雜，那麼你應該看看Vuex

Answer 2

@craig_h是正確的，或者您可以使用$參，如：

<parent-element> 
    <sibling-a @onClickButton="changeCall"></sibling-a> 
    <sibling-b ref="b"></sibling-b> 
</parent-element> 

在父方法：

methods: { 
    changeCall() { 
     this.$refs.b.dataChange = 'changed'; 
    } 
    } 

在siblingA：

Vue.component('sibling-a', { 
    template: `<div><button @click="clickMe">Click Me</button></div>`, 
    methods: { 
    clickMe() { 
     this.$emit('onClickButton'); 
    } 
    } 
}); 

在siblingB：

Vue.component('sibling-b', { 
    template: `<div>{{dataChange}}</div>`, 
    data() { 
    return { 
     dataChange: 'no change' 
    } 
    } 
});