我正在使用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中将占位符的内容设置为空：Vue.createApp({ setup() { const placeholder = document.getElementById('teleport-here'); placeholder.innerHTML = ''; } }).mount('#app');<script src="https://unpkg.com/vue@next"></script> <div> <div id="teleport-here">Teleport placeholder... I want this to be replaced by the teleport component</div> <div id="app">This placeholder will be replaced with app when app mounts... <!-- teleport component --> <teleport to="#teleport-here"> <div>Teleport content...</div> </teleport> </div> </div>