vue3使用Teleport 控制台报警告：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 渲染且位于组件树之后部分的容器元素作为目标
唉 还是得细心看文档 一时粗心 耽误事儿啊。。。
原文地址：https://blog.csdn.net/weixin_44166849/article/details/142611258
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！