解决vue3父子路由通信问题

在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>