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

Question

I try to pass data from parent component to its multi-depth child component and only its deepest component need this data. Now I try to use emit and props in every child component to pass data.Is there a more elegant way to achieve it? Thanks in advance.

Answer 1

This sounds like a perfect use case for vuex. If you want to prevent prop or event drilling all the way up and down to the most deeply nested child components, then you should think about creating this portion of your app state within a global store.

Then you can simply just call a mutation, change the value from whatever component you want to change it via a mutation and the parent component will know about the changed state.

Depending on if you are using the Options or the Composition API, the code will look slightly different.

Because you are using typescript, you should maybe think about using the Composition API because it works better for typescript projects.