如何使用ts将数据传递给vue3中的多深度子组件

Posted 2023-02-23

【中文标题】如何使用ts将数据传递给vue3中的多深度子组件

【英文标题】：How to pass data to multi-depth child component in vue3 with ts

【发布时间】：2021-08-28 02:27:54

【问题描述】：

我尝试将数据从父组件传递到其多深度子组件，并且只有其最深的组件才需要此数据。现在我尝试在每个子组件中使用emit和props来传递数据。有没有更优雅的方式来实现呢？提前致谢。

【参考方案1】：

这听起来像是 vuex 的完美用例。 如果您想防止 prop 或事件一直向上和向下钻取到嵌套最深的子组件，那么您应该考虑在全局存储中创建这部分应用状态。

然后你可以简单地调用一个突变，从任何你想通过突变改变它的组件更改值，父组件就会知道改变的状态。

根据您使用的是 Options 还是 Composition API，代码看起来会略有不同。

因为您使用的是 typescript，所以您可能应该考虑使用 Composition API，因为它更适合 typescript 项目。