Rumah > hujung hadapan web > tutorial js > Membina Tindanan Pengeluaran: Docker, Meilisearch, NGINX & NestJS

Membina Tindanan Pengeluaran: Docker, Meilisearch, NGINX & NestJS

Linda Hamilton
Lepaskan: 2025-01-04 20:42:40
asal
700 orang telah melayarinya

Building a Production Stack: 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>My Blog Post</h1>
    <ArticleComponent>{{ content }}</ArticleComponent>
  </div>
</template>

<!-- Vue 3 -->
<template>
  <h1>My Blog Post</h1>
  <ArticleComponent>{{ content }}</ArticleComponent>
</template>

Salin selepas log masuk

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>



Salin selepas log masuk
  • And when you have more than one root:
<!-- Child -->
<template>
  <h1>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" />
</template>
Salin selepas log masuk

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 ref="h1Ref">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" />
</template>
Salin selepas log masuk

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

Atas ialah kandungan terperinci Membina Tindanan Pengeluaran: Docker, Meilisearch, NGINX & NestJS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan