Tulis semula tajuk ke: Vue 3: Pindahkan kandungan ke elemen dan gantikan

Question

Saya menggunakan teleport Vue 3 untuk menjadikan elemen menjadi div dan ia berfungsi seperti yang diharapkan.

Teleport akan menambah item pada elemen yang dipilih tetapi tidak akan menggantikan elemen semasa dalam div.

Bagaimana cara saya menyediakan teleport untuk menggantikan elemen dalam div, sama seperti cara apl vue menggantikan kandungan div anchor apabila dipasang?

Latar Belakang: Atas sebab SEO, saya memerlukan elemen pemegang tempat sehingga apl dipaparkan dan dihantar.

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

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

Answer 1

Anda perlu mempunyai beberapa logik berasingan untuk mengalih keluar ruang letak apabila perlu.

Tetapkan kandungan pemegang tempat untuk mengosongkan 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>