从同级组件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' 
    } 
    } 
});