如何实现复合组件通信？

Question

需求：用vue写一个类似饿了么checkout组件，外面是包裹组件 里面是选项组件，要实现将选中的组件的id以数组的形式绑定到包裹组件上

问题：如果在选项组件上通过点击调用封装的dispatch方法在包裹组件上触发相关事件，那只能在包裹组件外部监听该事件再调用相关方法绑定选中组件ID。如何才能在包裹组件内部监听自定义事件触发相关方法？也就是说如何在图二中监听自定义事件，进而在该组件中实现绑定选中的组件ID？

Answer 1

wrap { mounted() {this.$on('item-click', handleItemClick)} }

item { methods: handleClick() { this.dispatch('item-click', id)}

Answer 2

抱歉没有仔细看代码就回答：
涉及到复杂的状态管理或数据流动，非常推荐用vuex，可以大大提高后期维护效率。
当某一个组件提交了状态到vuex之后，其余的事情当前组件就不关心了，其它组件会不会接收这个状态，接收了会怎么主力都不再关心，而且通过chrome的vue devtool也方便调试。
如果单单是父子组件，那么emit和on肯定就足够了。