Réécrivez le titre comme suit : Vue 3 : Transférer le contenu vers l'élément et remplacer

Question

J'utilise la téléportation de Vue 3 pour restituer un élément dans un div et cela fonctionne comme prévu.

Teleport ajoutera l'élément à l'élément sélectionné mais ne remplacera pas l'élément actuel dans le div.

Comment configurer la téléportation pour remplacer des éléments dans un div, de la même manière qu'une application vue remplace le contenu d'un div d'ancrage une fois montée ?

Contexte : pour des raisons de référencement, j'ai besoin d'un élément d'espace réservé jusqu'à ce que l'application soit rendue et livrée.

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

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

Answer 1

Vous devez disposer d'une logique distincte pour supprimer les espaces réservés si nécessaire.

Définissez le contenu de l'espace réservé pour qu'il soit vide dans 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>