在vue2中我们知道,父子路由通信其实就是父子组件之间的通信,但是在vue3中有一些小差别,父路由通过ref链去获取子路由的响应式数据和方法是获取不到的,解决办法就是使用插槽的形式把子路由变为子组件,具体实现如下:
父组件:
<template>
<button @click="callSonMethod">调用子组件的方法</button>
<router-view v-slot="{ Component }">
<component ref="viewBox" :is="Component" />
</router-view>
</template>
<script setup>
import { ref } from "vue"
const viewBox = ref()
const callSonMethod = ()=>{
console.log(viewBox.value.sonState) //通过ref链可以拿到子组件的参数
viewBox.value.sonMethod() //通过ref链调用子组件的方法
}
</script>
子组件:
<script setup>
import { ref } from "vue"
const sonState = ref('我是子组件的数据')
const sonMethod = ()=>{
alert('我是子组件的方法')
}
//在setup里边的数据是私有的,需要通过defineExpose暴露给父组件,父组件才可以使用
defineExpose({
sonState,
sonMethod
})
</script>