将标题重写为:Vue 3:将内容传送到元素并进行替换
P粉237029457
P粉237029457 2023-11-06 11:01:38
0
1
978

我正在使用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>


P粉237029457
P粉237029457

全部回复(1)
P粉903969231

您需要有一些单独的逻辑来在必要时删除占位符。

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>
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板