方式一：使用teleport;

parent

<tempalte>
	<div id="parent"></div>
	
	<>
		...
		<Child />
		...
	</>
</template>

Child

<Teleport to="#parent">
	some content...
</Teleport>

方式二：自定义hook

hooks: useRegistryEmit

function useRegistryEmit(emits) {
  const emitRegistry = payload => {
    emits('registry', payload)
  }

  // 路由切换时重置
  onBeforeRouteLeave(() => {
    emits('registry', null)
  })
  return { emitRegistry }
}

父组件中

<el-main class="p-0 flex flex-col">
  <div class="flex justify-between px-12 shadow-md items-center z-[1000]">
    ...
    <div>
      <Component :is="navRightRender" />
    </div>
  </div>
  <RouterView v-slot="{ Component }">
    <div class="h-auto flex-grow-1 overflow-y-auto">
	    // Children
      <Component :is="Component" @registry="registry" />
    </div>
  </RouterView>
</el-main>

<script setup>
const navRightRender = ref(null)

function registry(payload) {
  navRightRender.value = payload
}
</script>

子组件中使用hook

const emits = defineEmits(['registry'])
const { emitRegistry } = useRegistryEmit(emits)

// 调用时机：onCreated/onMounted
emitRegistry(() =>
  h(
    ElButton,
    {
      type: 'primary',
      size: 'small',
      onClick: () => {
        ...
      },
    },
    '新增'
  )
)