Invalid Teleport target on mount: null (object)

Failed to locate Teleport target with selector “.demon”. Note the target element must exist before the component is mounted - i.e. the target cannot be rendered by the component itself, and ideally should be outside of the entire Vue component tree
main.js:8 [Vue warn]: Invalid Teleport target on mount: null (object)

vue 项目引用 Teleport 的时候报错

注：写这篇的目的是以此为戒不再犯蠢 啊啊啊 这真是让我吐槽一天都不止的蠢问题

父组件

<template><div><div id="container">这是id:container</div><div class="demon">这是class:main</div><Demo> </Demo></div>
</template>
<script setup>
import Demo from "@/components/Demo.vue";
</script>
<style scoped></style>

子组件

<template><div><div>这是子组件</div><Teleport to="#container"><div>这是传送 Teleport的内容</div></Teleport></div>
</template>
<script setup></script>
<style scoped></style>

看着没啥问题 可是控制台就是报警告而且teleport 时管用时不管用

解决问题

原因是 vue文档中表示 teleport 需要 加上 defer 属性 无论刷新还是重新加载 传送组件就不会报错了

使用 defer prop 推迟 Teleport 的目标解析，直到应用的其他部分挂载。这允许 Teleport 将由 Vue 渲染且位于组件树之后部分的容器元素作为目标

唉 还是得细心看文档 一时粗心 耽误事儿啊。。。