Schreiben Sie den Titel um in: Vue 3: Inhalt auf Element übertragen und ersetzen

Question

Ich verwende den Teleport von Vue 3, um ein Element in ein Div zu rendern, und es funktioniert wie erwartet.

Teleport fügt das Element dem ausgewählten Element hinzu, ersetzt jedoch nicht das aktuelle Element im Div.

Wie richte ich den Teleport ein, um Elemente innerhalb des Div zu ersetzen, ähnlich wie eine Vue-App den Inhalt eines Anker-Div ersetzt, wenn es gemountet wird?

Hintergrund: Aus SEO-Gründen benötige ich ein Platzhalterelement, bis die App rendert und ausliefert.

<!-- 应用程序外部的HTML -->
<div>
  <div id="teleport-here">传送占位符...我希望这个被传送组件替换</div>
  <div id="app">当应用程序挂载时，这个占位符将被应用程序替换...</div>
</div>

<!-- 传送组件 -->
<teleport to="#telport-here">
  <div>传送内容...</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>