vue3子孙组件传值

在Vue3中，子孙组件之间传值可以使用provide和inject来实现。在父组件中使用provide提供数据，子组件使用inject接收数据。

在给子组件传值的例子中，父组件提供了两个数据sonDate和childDate，分别是"子组件数据"和"孙组件数据"。在父组件的template中，使用son-com标签引入了子组件sonCom。在子组件sonCom的template中，使用button标签绑定了一个点击事件getGrandFatherData，并在点击事件中调用了getGrandFatherData方法。在getGrandFatherData方法中，使用inject接收了父组件的方法fun1和数据data1，并进行了调用和打印。这样就实现了子组件获取祖父组件的数据。

在孙组件grandChildCom中，使用inject接收了父组件传递的childDate数据，并在template中展示了该数据。

总结起来，父组件通过provide提供数据，子组件通过inject接收数据，实现了子孙组件之间的传值。
#### 引用[.reference_title]
- *1* [VUE3祖孙组件传值调用方法](https://blog.csdn.net/qq_37656005/article/details/127448616)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [vue父组件给子孙组件传值（provide && inject）](https://blog.csdn.net/weixin_41227874/article/details/121373930)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]