Membina Tindanan Pengeluaran: Docker, Meilisearch, NGINX & NestJS

pengenalan

Jika anda sudah biasa dengan Vue 2, anda mungkin ingat bahawa setiap templat komponen memerlukan satu elemen akar. Dalam Vue 3, itu tidak lagi diperlukan kerana serpihan. Ini bermakna komponen anda kini boleh mempunyai berbilang elemen akar tanpa memerlukan pembalut.

<!-- Vue 2 -->
<template>
  <div> <!-- wrapper ? -->
    <h1 id="My-Blog-Post">My Blog Post</h1>
    <articlecomponent>{{ content }}</articlecomponent>
  </div>
</template>

<!-- Vue 3 -->
<template>
  <h1 id="My-Blog-Post">My Blog Post</h1>
  <articlecomponent>{{ content }}</articlecomponent>
</template>

Itu sangat serupa dengan Fragment in React. Walau bagaimanapun, Vue mengendalikan serpihan di sebalik tabir. Malah, dalam Vue 3, anda boleh memikirkan tag sebagai serpihan.

Masalah ref().

Dalam Vue 2, kami boleh menetapkan ref pada komponen kanak-kanak dengan mudah, dan ia akan merujuk kepada kedua-dua elemen pembungkus dan contoh komponen.

Tetapi dalam Vue 3, apabila tiada elemen pembalut, apakah yang dimaksudkan oleh ref? ?

Jika komponen anak menggunakan API Pilihan atau tidak menggunakan , ref akan menunjuk kepada komponen anak ini, memberikan induk akses penuh kepada sifat dan kaedahnya.

Bagaimana jika kita menggunakan ?

Komponen yang menggunakan adalah peribadi secara lalai. Untuk mendedahkan sifat, kita perlu menggunakan makro defineExpose.

Akses Kepada Elemen Kanak-kanak

• Inilah yang berlaku apabila anda mempunyai elemen pembalut (akar tunggal):

<!-- Child -->
<template>
  <div>



<ul>
<li>And when you have more than one root:
</li>
</ul>

<pre class="brush:php;toolbar:false"><!-- Child -->
<template>
  <h1 id="My-Blog-Post">My Blog Post</h1> <!-- Root 1 -->
  <articlecomponent>{{ content }}</articlecomponent> <!-- Root 2 -->
</template>



<!-- Parent -->
<script setup lang="ts">
const childRef = ref()

onMounted(()=>{
  console.log(childRef.value.$el); // #text  
})
</script>

<template>
  <child ref="childRef"></child>
</template>

Tunggu, apa, apa yang berlaku?

Apabila kami menggunakan Fragment(berbilang nod), Vue mencipta nod teks yang membalut nod akar komponen anak kami.

Apabila menggunakan Fragmen dalam Vue 3, Vue memasukkan nod teks kosong pada permulaan komponen sebagai penanda, itulah sebabnya $el mengembalikan nod #teks.

#teks adalah seperti titik rujukan yang digunakan oleh Vue secara dalaman.

Saya juga harus menyatakan bahawa anda masih mempunyai akses kepada contoh komponen (jika anda tidak menggunakan dalam kanak-kanak).

Penyelesaian

1) Gunakan Single Root Seperti ini
2) Gunakan Rujukan Templat defineExpose

Menggunakan Rujukan Templat defineExpose

<!-- Child -->
<script setup lang="ts">
import { ref } from 'vue';

const h1Ref = ref()
const articleRef = ref()


defineExpose({
  h1Ref,
  articleRef
})
</script>

<template>
  <h1 id="My-Blog-Post">My Blog Post</h1> 
  <articlecomponent ref="articleRef">{{ content }}</articlecomponent> 
</template>



<!-- Parent -->
<script setup lang="ts">
const childRef = ref()

onMounted(()=>{
  console.log(childRef.value); 
  //  {h1Ref: RefImpl, articleRef: RefImpl}
})
</script>

<template>
  <child ref="childRef"></child>
</template>

Kini anda mempunyai akses kepada rujukan anda dan semua perkara yang anda dedahkan dengan menggunakan defineExpose.