技術的なポイント: vue3 は ref を使用してルータービューをバインドし、サブルート内のメソッドを呼び出してデータをリロードしたいと考えています。

需要の背景

現在、親ルーティング ページ (/system) としてページがあり
、そのサブページは 2 つの下位ページ (/system/user /system/auth) です。

検索ボックスと追加ボタンは両方とも親マスターにあるため、追加ボタンをクリックするか、検索ボックスで検索するときに、サブルーティング ページの対応するメソッドをトリガーする必要があります。例: ユーザー リストが選択されている場合タブで、サブページのユーザー追加メソッドがトリガーされ、タブでロール権限が選択されると、サブページのロール追加メソッドがトリガーされます。

コード

/システム内

<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('添加角色')
    }
  })