在VUE.JS中的多个级别上的绑定和自定义事件触发

Question

我是VUE.JS的新手，但是我已经完成了一些vuemastery的初学者课程。尽管我知道如何绑定属性以及如何发出自定义事件，但我有一个问题：我不知道如何通过多个级别的组件来制作这些东西。

假设我们具有以下层次结构：

我需要从图底部的Elements和Input组件控制Home组件的属性。现在，我正在从下到上逐级发出自定义事件，但这看起来不是一个很好的解决方案。

有更好的方法吗？当然，当我从Input组件更改属性之一时，它也需要对Element组件中的属性产生影响。

例如，Element组件是

元素，这些元素的宽度和高度基于totalWidth属性计算，可以在Input组件中进行编辑。我在控制台中也有警告：[Vue警告]：避免直接更改prop，因为每当父组件重新渲染时，该值就会被覆盖。

Answer 1

使用this.$root.$emit在根组件上发出事件，然后在其子组件上传播事件，而与深度级别无关

Answer 2

我建议使用vuex来管理应用程序的状态。到处发送事件并不是最优雅的解决方案。