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

Question

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.