需求背景

当前有一个页面为父路由页面(/system)
他的子页面是他的两个下级(/system/user /system/auth)

由于搜索框及添加按钮都在父级母版中，现在需要在点击添加按钮或者搜索框搜索时都触发子路由页面对应的方法，如：在tab选中用户列表时，触发子页面内的添加用户方法，tab选中角色权限时，触发子页面的添加角色方法

代码实现

在 /system 中

<template>
  <router-view v-slot="{ Component }">
    <component ref="order" :is="Component" />
  </router-view>
</template>
<script setup>
  import { ref } from 'vue'
  let order = ref()
  const test = () => {
    order.value.add()
  }
</script>

在 /system/user ， /system/auth中

  defineExpose({
    add() {
      console.log('添加用户')
      //   console.log('添加角色')
    }
  })