dexblog.ro
Acces rapid: Învață AI Învață Programare Specificații Dispozitive Comparații
VUE Toate comenzile Vue.js & Nuxt

Directiva v-slot (și scurtătura #) în Vue 3 în Vue.js & Nuxt

Directive de Template (Template Directives) Vue 2.6+ / Vue 3 Q&A / Distribuie cod

Specifică slotul nominalizat sau accesează datele transmise de componenta copil prin sloturi cu domeniu (scoped slots).

Sintaxă 
<template v-slot:numeSlot='slotProps'>...</template> | #numeSlot='{ camp }'

Ce este directiva v-slot

Directiva v-slot (pentru care se folosește frecvent scurtătura #) indică zona de distribuție din componenta copil unde trebuie injectat conținutul. În plus, v-slot permite preluarea proprietăților transmise de copil (scoped slots), permițând părintelui să customizeze randarea datelor interne ale copilului.

Exemplu Concret: Randarea personalizată a elementelor unei liste generice
<template>
  <ListaProduse :produse="articole">
    <!-- Folosirea scurtăturii #articol și destructurarea proprietăților -->
    <template #articol="{ produs }">
      <div class="card-produs">
        <strong>{{ produs.titlu }}</strong> - {{ produs.pret }} Lei
      </div>
    </template>
  </ListaProduse>
</template>

Comunitate & Schimb de cunoștințe

Întrebări & Exemple de Cod: Directiva v-slot (și scurtătura #) în Vue 3

Ai o nelămurire despre utilizarea comenzii Directiva v-slot (și scurtătura #) în Vue 3 sau ai descoperit un truc / fragment de cod util? Distribuie-l cu ceilalți programatori!

💬

Fii primul care pune o întrebare sau distribuie un fragment de cod / prompt!

Nu au fost adăugate încă întrebări sau exemple de cod pentru această pagină. Dacă ai întâlnit o problemă sau ai un snippet util, adaugă-l mai jos pentru a-i ajuta pe ceilalți.

Comunitate Adaugă o întrebare sau distribuie un cod

Moderare & Siguranță:

Pentru a menține calitatea și securitatea informațiilor, fiecare întrebare sau fragment de cod/prompt este analizat (manual sau prin moderare asistată de AI) înainte de publicare.