Komponent holati qanday e'lon qilinadi: props, lokal ma'lumotlar va emits?

Savol

Komponent holatini e'lon qilish va uzatishning qanday usullari bor — props, lokal ma'lumotlar, emits — va ular bir-biri bilan qanday bog'liq?

Qisqa javob

Props — ota komponent bola komponentga yuqoridan pastga uzatadigan ma'lumotlar; ular bola komponent ichida faqat o'qish uchun. Lokal holat <script setup> ichida ref/reactive orqali e'lon qilinadi va komponentning o'ziga tegishli bo'ladi. Emits — bola komponent ota komponentga hodisalar haqida (pastdan yuqoriga) xabar berish mexanizmi bo'lib, uning ma'lumotlarini to'g'ridan-to'g'ri o'zgartirmaydi.

Batafsil javob

Vue-komponent — o'z kirish va chiqishlariga ega alohida UI bo'lagi:

• Props (kirish ma'lumotlari). defineProps() orqali e'lon qilinadi. Ma'lumotlar oqimi bir tomonlama: ota komponent qiymatga egalik qiladi va uni atribut orqali pastga uzatadi (:count="value"). Bola komponent propni to'g'ridan-to'g'ri mutatsiya qilmasligi kerak — bu antipattern hisoblanadi va Vue dev-rejimda ogohlantirish chiqaradi. Agar propga lokal o'zgaruvchan aks ettirish kerak bo'lsa, buning uchun prop qiymati bilan boshlangan alohida ref yaratiladi (yoki ikki tomonlama bog'lash uchun defineModel() ishlatiladi).
• Lokal holat. Faqat komponent ichida kerak bo'lgan va tashqaridan uzatilmaydigan ma'lumotlar ref() (primitivlar va umuman istalgan qiymatlar uchun) yoki reactive() (obyektlar uchun) orqali e'lon qilinadi. Bu holat komponent nusxasi bilan birga yashaydi va o'ladi.
• Emits (chiquvchi hodisalar). Propni to'g'ridan-to'g'ri o'zgartirib bo'lmagani uchun, "pastdan yuqoriga" bog'lanish uchun bola komponent defineEmits() orqali hodisa emit qiladi, ota komponent esa @event-name orqali unga obuna bo'lib, o'z holatini o'zi yangilaydi. Bu ma'lumotlar oqimini bashorat qilinadigan qiladi: o'zgarish qayerdan kelganini har doim bilish mumkin.

Bunday model "props pastga, hodisalar yuqoriga" (props down, events up) deb ataladi — ma'lumotlar komponentlar daraxti bo'ylab pastga oqadi, o'zgarishlar esa boshqa birovning holatini to'g'ridan-to'g'ri mutatsiya qilish o'rniga hodisalar orqali yuqoriga ko'tariladi.

Misol

<!-- CounterButton.vue (bola komponent) -->
<script setup>
const props = defineProps({
  modelValue: { type: Number, required: true }
})
const emit = defineEmits(['update:modelValue'])

function increment() {
  // prop to'g'ridan-to'g'ri mutatsiya qilinmaydi — yangi qiymat bilan hodisa emit qilinadi
  emit('update:modelValue', props.modelValue + 1)
}
</script>

<template>
  <button @click="increment">+1 (hozir: {{ modelValue }})</button>
</template>

<!-- Parent.vue -->
<script setup>
import { ref } from 'vue'
import CounterButton from './CounterButton.vue'

// ota komponentning lokal holati
const count = ref(0)
</script>

<template>
  <!-- v-model — :modelValue + @update:modelValue ustidagi shakar -->
  <CounterButton v-model="count" />
  <p>Ota komponentdagi qiymat: {{ count }}</p>
</template>

Qo'shimcha savollar

• Nega bola komponent ichida propni to'g'ridan-to'g'ri mutatsiya qilib bo'lmaydi va shunga urinilsa nima bo'ladi?
• Lokal holatni e'lon qilishda ref reactive'dan nimasi bilan farq qiladi?
• v-model orqali bir nechta nomlangan qiymatni qanday uzatish mumkin (v-model:title, v-model:count)?