Vue'de bileşenler ve props nasıl çalışır?

Question

IT Interview Practice · Accepted Answer

**Bileşenler** yeniden kullanılabilir, bağımsız UI parçalarıdır. **Props**, bir üst bileşenin verilerini alt bileşene *aşağıya* iletme yöntemidir — bunlar alt bileşenin yazılı, salt okunur girdileridir. ## Alt bileşende props'ları tanımlama ```vue ``` ## Üst bileşenden props'ları geçirme ```vue ``` Farkı dikkate alın: `name="Ann"` bir sabit dizgi geçerirken, `:age="30"` (`v-bind` ile) bir ifadeyi değerlendirir — sayılar, boolelar, nesneler veya değişkenler için gereklidir. Ayrıca prop adları JS'de `camelCase` ancak şablonlarda `kebab-case` olur (`isAdmin` → `:is-admin`). ## Props tek yönlü ve salt okunurdur ```js props.name = "Bob"; // ❌ Vue warns — never mutate a prop ``` Veriler **aşağıya doğru** (üst → alt) akar. Bir alt bileşen kendi props'larını değiştirmemelidir; bir şeyler değiştirmesi gerekirse, yerel bir kopya kullanır veya üst bileşenden kaynağı değiştirmesini isteyen **bir etkinlik yayınlar** ("props aşağı, etkinlikler yukarı"). Bu tek yönlü akış, verileri tahmin edilebilir tutar. ## TypeScript props ```vue ``` ## Neden önemli Bileşenler ve props Vue mimarisinin temelini oluşturur — yeniden kullanılabilir bileşenlerden UI'ler oluşturup bunları props aracılığıyla yapılandırırsınız. Props'ların **tek yönlü ve salt okunur** olduğunu anlamak (veriler aşağı, etkinlikler yukarı) Vue uygulamalarını tahmin edilebilir tutan temel zihinsel modeldir; props'ları değiştirmek veya çift yönlü prop akışı beklemek, hataların klasik bir kaynağıdır.

Alt bileşende props'ları tanımlama

Üst bileşenden props'ları geçirme

Props tek yönlü ve salt okunurdur

TypeScript props

Neden önemli

İlgili sorular