Vue3 子路由vue怎样调用父路由vue中的方法？

1.  router -> index.ts 文件：

2. import { createRouter, createWebHistory } from 'vue-router'
3. import DefaultView from '@/views/default/index.vue'
4. import ParentView from '@/views/parent/index.vue'
5. import ChildView from '@/views/child/index.vue'
7. const router = createRouter({
8.   history: createWebHistory(import.meta.env.BASE_URL),
9.   routes: [
10.     {
11.       path: '/',
12.       name: 'Default',
13.       component: DefaultView
14.     },
15.     {
16.       path: '/parent',
17.       name: 'parent',
18.       component: ParentView,
19.       children: [
20.         {
21.           path: 'child',
22.           name: 'child',
23.           component: ChildView
24.         }
25.       ]
26.     }
27.   ]
28. })
30. export default router

复制代码

2、父路由 ParentView 对应的 index.vue 界面

2. <template>
3.   <div>
4.     <span>父路由界面</span>
5.    <!-- 下面 route-view 是子路由承载标签 -->
6.     <router-view></router-view>
7.   </div>
8. </template>
9. <script setup lang="ts">
10. import { onMounted, provide } from 'vue'
12. //使用 provide 方法向子路由公开 CallParent 方法
13. provide('CallParent', (data: any) => {
14.       console.log('成功调用了父路由方法');
15. })
17. onMounted(() => {
18.      //父路由界面元素加载完毕
19. })
20. </script>

复制代码

3、子路由 ChildView 对应的 index.vue 界面

2. <template>
3.   <div>
4.     <span>子路由界面</span>
5.   </div>
6. </template>
7. <script setup lang="ts">
8. import { onMounted, inject } from 'vue'
10. //使用 inject 获取到父路由公开 CallParent 方法
11. let parentMethod: (data: any) => {} = inject('CallParent')
13. onMounted(() => {
14.      //调用父路由中的方法
15.      parentMethod('hello world!')
16. })
17. </script>

复制代码