vue3 父路由的方法

解决方案

在Vue 3项目中，父路由与子路由之间的交互是常见的需求。为了实现父路由向子路由传递方法或者子路由调用父路由的方法，我们可以使用provide和inject、事件总线（mitt库）、ref和defineExpose等方法。这些方式可以确保父子组件之间的通信顺畅，并且代码结构清晰。

一、使用provide和inject

这是Vue官方推荐的一种跨层级组件间通信的方式，在父级组件中通过provide选项提供数据或方法，在子孙组件中通过inject来接收。

父组件代码：

vue</p>


import { provide } from 'vue'
function parentMethod(){
    console.log('this is a method from parent')
}
provide('parentMethod', parentMethod)


<p>

子组件代码：

vue</p>


import { inject } from 'vue'
const parentMethod = inject('parentMethod')
// 调用父级方法
parentMethod()


<p>

二、使用事件总线（mitt库）

对于非父子关系或者不想破坏组件封装性的场景，可以引入一个轻量级的事件管理库mitt。

安装mitt：npm install mitt

创建事件总线文件bus.js：

js import mitt from 'mitt' const bus = mitt() export default bus

父组件代码：

vue</p>


import bus from './bus'
function handleEventFromChild(data){
    console.log('data from child:', data)
}
bus.on('event-from-child',handleEventFromChild)


<p>

子组件代码：

vue</p>


import bus from './bus'
function triggerParentMethod(){
    bus.emit('event-from-child',{msg:'hello'})
}


<p>

三、使用ref和defineExpose

当子组件是父组件的直接子组件时，可以使用此方法。ref用于获取子组件实例，defineExpose用于暴露子组件中的属性或方法给父组件，不过这里我们反过来让父组件暴露方法给子组件。

父组件代码：

vue</p>


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

const childRef = ref(null)

function parentMethod(){
    console.log('parent method called')
}

// 暴露给子组件
defineExpose({
    parentMethod
})


<p>