我正在使用Vue 3的teleport将元素渲染到一个div中，它按预期工作。
Teleport会将项目添加到所选元素中，但不会替换div中的当前元素。
我如何设置teleport以替换div中的元素，类似于vue应用程序在挂载时替换锚点div内容的方式？
背景：出于SEO的原因，我需要占位元素，直到应用程序渲染和传送。
传送占位符...我希望这个被传送组件替换当应用程序挂载时，这个占位符将被应用程序替换...
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
1
1256
收藏
您需要有一些单独的逻辑来在必要时删除占位符。
在
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>