Vue 3传送到元素并替换内容

Question

我正在使用vue 3 teleport来呈现div中的元素，并且它的工作方式与预期的一样。

远程传送会将项目添加到所选元素，但不会替换div中的当前元素。

我如何设置远程传输来替换div中的元素，就像vue应用程序在挂载时替换锚定div内容一样？

上下文:我需要搜索引擎优化的原因占位符元素，直到应用程序渲染和传送。

<!-- HTML outside the app -->
<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...</div>
</div>

<!-- teleport component -->
<teleport to="#telport-here">
  <div>Teleport content...</div>
</teleport>

Answer 1

您需要一些单独的逻辑，以便在必要时删除占位符。

在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>

​