Vue komponentlari bir-biri bilan qanday muloqot qiladi?

Savol

Vue komponentlari orasida ma'lumot uzatishning qanday usullari mavjud?

Qisqa javob

Asosiy tamoyil — "props pastga, hodisalar yuqoriga" (props down, events up): ota komponent ma'lumotlarni props orqali uzatadi, bola komponent o'zgarishlar haqida emit orqali xabar beradi. Murakkabroq holatlar uchun slots va provide/inject mavjud.

Batafsil javob

• props — ota komponentdan avlodga bir tomonlama ma'lumot oqimi. Bola komponent props'ni to'g'ridan-to'g'ri mutatsiya qilmasligi kerak.
• emit — avlod ota komponentga hodisa haqida xabar beradi (emit('update:modelValue', value) — v-modelning asosi).
• slots — ota komponentga nafaqat ma'lumot, balki razmetkani ham komponent ichiga uzatish imkonini beradi. Nomlangan va scoped slotlar ota komponent shablonidan bola komponent ma'lumotlariga kirish imkonini beradi.
• provide/inject — har bir oraliq komponent orqali props'ni "uzatib o'tkazmasdan" (prop drilling) bir nechta ichma-ichlik darajasi orqali ma'lumot uzatish. Bezak mavzulari, konfiguratsiya, avtorizatsiya uchun yaxshi mos keladi.
• Bog'liq bo'lmagan komponentlar uchun — umumiy holat (Pinia) yoki hodisalar shinasi (Vue 3'da kamdan-kam ishlatiladi).

Misol

<!-- Parent.vue -->
<script setup>
import { ref } from 'vue'
const title = ref('Salom')
function handleClose() { title.value = '' }
</script>
<template>
  <Card :title="title" @close="handleClose">
    <template #footer>
      <button>Amal</button>
    </template>
  </Card>
</template>

<!-- Card.vue -->
<script setup>
defineProps<{ title: string }>()
defineEmits<{ close: [] }>()
</script>
<template>
  <div>
    <h2>{{ title }}</h2>
    <slot />
    <slot name="footer" />
  </div>
</template>

Qo'shimcha savollar

• Maxsus komponentda v-model orqali ikki tomonlama bog'lashni qanday amalga oshirish mumkin?
• Scoped slot oddiy slotdan nimasi bilan farq qiladi?
• provide/inject qachon Pinia'dan afzalroq bo'ladi?