Technical point: vue3 uses ref to bind router-view, and wants to call a method in a sub-route to reload data.

Demand background

Currently there is a page as the parent routing page (/system)
and its sub-pages are its two subordinates (/system/user /system/auth)

Since the search box and add button are both in the parent master, it is now necessary to trigger the corresponding method of the sub-routing page when clicking the add button or searching in the search box. For example: when the user list is selected in the tab, the add user in the sub-page is triggered. Method, when the role permissions are selected in the tab, the add role method of the sub-page is triggered.

Code

in /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>

In /system/user, /system/auth

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