我正在使用Vue 3的teleport将元素渲染到一个div中,它按预期工作。
Teleport会将项目添加到所选元素中,但不会替换div中的当前元素。
我如何设置teleport以替换div中的元素,类似于vue应用程序在挂载时替换锚点div内容的方式?
背景:出于SEO的原因,我需要占位元素,直到应用程序渲染和传送。
<!-- 应用程序外部的HTML --> <div> <div id="teleport-here">传送占位符...我希望这个被传送组件替换</div> <div id="app">当应用程序挂载时,这个占位符将被应用程序替换...</div> </div> <!-- 传送组件 --> <teleport to="#telport-here"> <div>传送内容...</div> </teleport>
您需要有一些单独的逻辑来在必要时删除占位符。
在
setup
中将占位符的内容设置为空: