我正在尝试将一些数据从一个子组件发送和渲染到另一个子组件，并且两个组件都使用一个主组件进行渲染，我如何在两个子组件之间传递数据（在我的 vue 应用程序中）？
exg
I have two child components A & B , "B" has click add to cart click event and have data of cart items , & i have template for cart item in component "A"
【问题讨论】：
标签： vue.js vue-component
在这种情况下，由于两个组件共享同一个父组件，因此通常会将您需要的任何共享状态移动到父组件中并作为道具传递给子组件。
如果组件不共享直接父级，您可以使用事件总线（对于非常小的应用程序）或 Vuex。 Vuex 允许您在应用程序中的组件之间共享状态，而无需通过多个级别向下传递道具。
【讨论】：
有很多方法可以实现这一点。我正在解释全球偶数巴士概念。下面是一个例子。在这里，孩子 A 和孩子 B 正在通过事件总线进行通信
const eventBus = new Vue ()
Vue.component('ChildB',{
template:`
<div id="child-b">
<h2>Child B</h2>
<pre>data {{ this.$data }}</pre>
<hr/>
</div>`,
data() {
return {
score: 0
}
},
created () {
eventBus.$on('updatingScore', this.updateScore) // 3.Listening
},
methods: {
reRender() {
this.$forceUpdate()
},
updateScore(newValue) {
this.score = newValue
}
}
})
Vue.component('ChildA',{
template:`
<div id="child-a">
<h2>Child A</h2>
<pre>data {{ this.$data }}</pre>
<hr/>
<button @click="changeScore">Change Score</button>
<span>Score: {{ score }}</span>
</div>`,
props: ["score"],
methods: {
changeScore() {
this.score +=200;
eventBus.$emit('updatingScore', this.score+ 200)
}
}
})
Vue.component('ParentA',{
template:`
<div id="parent-a">
<h2>Parent A</h2>
<pre>data {{ this.$data }}</pre>
<hr/>
<child-a :score="score"/>
<child-b/>
</div>`,
data() {
return {
score: 100
}
}
})
Vue.component('GrandParent',{
template:`
<div id="grandparent">
<h2>Grand Parent</h2>
<pre>data {{ this.$data }}</pre>
<hr/>
<parent-a/>
</div>`,
})
new Vue ({
el: '#app',
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<grand-parent/>
</div>【讨论】：
理想情况下，您应该使用 Vuex 作为状态管理模式。
但是如果你的应用很简单，不需要经常做这些操作，你可以将emitpayload中的数据从child传给parent，然后父组件再通过props传递给另一个child
【讨论】：