vue3调用子路由方法

在Vue 3项目中，如果需要调用子路由组件的方法，可以通过以下几种方式实现。提供具体的解决方案和代码示例。

1. 使用provide / inject

这是官方推荐的一种跨层级传递数据和方法的方式。父级组件通过provide暴露方法，子组件通过inject获取方法。

vue
// 父组件</p>


import { provide } from 'vue'

function childMethod() {
  console.log('子组件方法被调用了')
}

provide('childMethod', childMethod)


<p>
  
</p>

<p>// 子组件</p>


import { inject } from 'vue'

const childMethod = inject('childMethod')

// 可以直接使用childMethod()


<p>

2. 使用事件总线

创建一个独立的事件总线文件eventBus.js：

javascript
import { createApp } from 'vue'
const app = createApp({})
export const eventBus = app.config.globalProperties.$bus = new Vue()


然后在需要触发的地方：

vue
// 父组件
import { eventBus } from '@/utils/eventBus'</p>

<p>eventBus.$emit('callChildMethod')</p>

<p>// 子组件
import { onMounted, onUnmounted } from 'vue'
import { eventBus } from '@/utils/eventBus'</p>

<p>let methodHandler = () => {
  console.log('子组件方法被调用了')
}</p>

<p>onMounted(() => {
  eventBus.$on('callChildMethod', methodHandler)
})</p>

<p>onUnmounted(() => {
  eventBus.$off('callChildMethod', methodHandler)
})

3. 使用ref引用

vue
// 父组件</p>


import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

const childRef = ref(null)

function callChildMethod() {
  if (childRef.value) {
    childRef.value.childMethod()
  }
}


<p>
  
</p>

<p>// 子组件</p>


defineExpose({
  childMethod() {
    console.log('子组件方法被调用了')
  }
})


<p>

以上三种方法各有优缺点：
- provide/inject适合多层级传递场景
- 事件总线适合松耦合场景
- ref引用适合父子组件直接关系

选择哪种方式取决于具体业务场景和项目需求。建议根据实际情况选择最适合的方案。同时要注意避免过度使用全局事件或过多的依赖注入，保持组件的独立性和可维护性。