Daha İyi Vue Bileşenleri Oluşturmak için Donanımları Kullanma

Vue'nun en önemli özelliklerinden biri, küçük, yeniden kullanılabilir bileşenleri birleştirerek web uygulamaları oluşturmanıza olanak sağlayan modüler mimarisidir. Bu, web uygulamanızı kolayca güncellemenizi ve bakımını yapmanızı sağlar.

Vue'daki her bileşenin kendi veri ve yöntemleri olabilir ve bunları alt bileşenlerine desteklerle aktarabilirsiniz. Burada, verileri ebeveynden alt bileşenlere aktarmak için Vue'da prop'ları nasıl kullanacağınızı öğreneceksiniz.

Vue'daki Donanımlar Nelerdir?

Props ("özellikler"in kısaltması), Vue'da bir ana bileşenin alt bileşenlerine aktarabileceği özel niteliklerdir.

Vue'da ana bileşenler, tek yönlü bir akışta alt bileşenlere destekleri iletir. Bu, alt bileşenlerin yalnızca bu aktarılan donanımları okuyabileceği ve kullanabileceği, ancak verileri değiştiremeyeceği anlamına gelir.

Donanımları kullanmak, uygulamanız boyunca uygulayabileceğiniz yeniden kullanılabilir bileşenler oluşturmanıza olanak tanır. Sıfırdan yeni bileşenler oluşturmak yerine bileşenleri yeniden kullanabileceğiniz için aksesuarlar zamandan ve emekten tasarruf etmenizi sağlar.

Vue'da Sahne Donanımı Nasıl Aktarılır

Vue'da donanımları geçmek basittir ve geçiş yönteminizden farklıdır React'te aksesuarlar. Vue'daki bir ana bileşenden onun alt bileşenine bir pervane geçirmek için, alt bileşenin komut dosyasındaki props seçeneğini kullanın.

İşte bir örnek:

 alt bileşen 
<şablon>
<div>
<h1>{{ başlık }}h1>
<P>{{ İleti }}P>
<P>{{ e-postaAdresi }}P>
div>
şablon>
<senaryo>
varsayılanı dışa aktar {
 ad: "Çocuk Bileşeni",
 aksesuarlar: ["başlık", "mesaj", "emailAddress"],
};
senaryo>

Yukarıdaki kod bloğu, bir ana bileşenden veri iletmek için donanımları kullanan bir Vue alt bileşenini açıklar. Bileşen, aşağıdakileri görüntüleyen üç HTML öğesi içerir: başlık, İleti, Ve e-postaAdresi enterpolasyonlu özellikler.

bu sahne alt bileşendeki seçenek, bir dizi özellik alır. Bu dizi, alt bileşenin üst bileşenden kabul ettiği özellikleri tanımlar.

Aşağıda, alt bileşene veri aktaran bir Vue üst bileşeni örneği verilmiştir. sahne:

 ana bileşen 
<şablon>
<div>
<alt bileşen
 title="Merhaba Dünya"
 message="Bu, ana bileşenden gelen bir mesajdır"
 emailAddress="[email protected]"
 />
div>
şablon>
<senaryo>
ChildComponent'i "./components/ChildComponent.vue" dosyasından içe aktarın;
varsayılanı dışa aktar {
 ad: "Ana Bileşen",
 bileşenler: {
 çocuk Bileşeni,
 },
};
senaryo>

Yukarıdaki kod bloğundaki ana bileşen, alt bileşene üç destek iletir. Kod bloğu, statik değerleri başlık, İleti, Ve e-postaAdresi sahne.

Ayrıca dinamik değerleri donanımlarınıza iletebilirsiniz. v-bağlama direktif. v-bağlama bir direktiftir verileri bağlamak için Vue'da kullanılır HTML niteliklerine.

Burada, Vue ana bileşeninin kullanıldığı bir örnek verilmiştir. v-bağlama sahne donanımına dinamik değerler iletme yönergesi:

 ana bileşen 
<şablon>
<div>
<alt bileşen
 :başlık= "başlık"
 :mesaj= "mesaj"
 :emailAddress= "emailAddress"
 />
div>
şablon>
<senaryo>
ChildComponent'i "./components/ChildComponent.vue" dosyasından içe aktarın;
varsayılanı dışa aktar {
 ad: "Ana Bileşen",
 bileşenler: {
 çocuk Bileşeni,
 },
 veri() {
 geri dönmek {
 başlık: "Hoş geldin canım",
 mesaj: "Nasılsın",
 emailAddress: "[email protected]",
 };
 },
};
senaryo>

Kullanmak v-bağlama alt bileşene veri iletmek için yönerge, ana bileşenin durumuna göre donanım değerlerini güncelleyebilirsiniz. Örneğin, değiştirerek başlık üst bileşendeki data özelliği, başlık alt bileşene iletilen prop da güncellenecektir.

Donanımları bir dizi dizi olarak tanımlamanın bu yöntemi, kestirme bir kalıptır. Dizideki dizelerin her biri bir pervaneyi temsil eder. Bu yöntem, dizideki tüm aksesuarlar aynı olduğunda idealdir. JavaScript veri türü.

Donanımları Vue'da Nesne Olarak Tanımlama

Donanımları bir dizi yerine bir JavaScript nesnesi olarak tanımlamak, her bir özelliğin daha iyi özelleştirilmesini sağlar. Prop'ları bir bileşende bir nesne olarak tanımlamak, her prop'un beklenen veri tipini ve varsayılan değerini belirlemenizi sağlar.

Ek olarak, bileşen kullanımdayken destek sağlanmazsa bir uyarı tetikleyerek belirli donanımları gerektiği gibi işaretleyebilirsiniz. Prop'ları bir nesne olarak tanımlamak, prop'ları bir dizi olarak tanımlamaya göre çeşitli avantajlar sunar, örneğin:

1. Beklenen veri türünün ve her destek için varsayılan değerin tanımlanması, sizin ve geliştirici ekibinizin bileşeni tam olarak nasıl kullanacağınızı anlamanızı kolaylaştırır.
2. Donanımları gerektiği gibi işaretleyerek, geliştirme sürecinin başlarında hataları yakalayabilir ve geliştirici ekibine daha fazla bilgi sağlayabilirsiniz.

İşte bir Vue.js bileşeninde props'u bir nesne olarak nasıl tanımlayacağınıza dair bir örnek:

<şablon>
<div>
<h1>{{ başlık }}h1>
<P>{{ İleti }}P>
<P>{{ e-postaAdresi }}P>
div>
şablon>
<senaryo>
varsayılanı dışa aktar {
 ad: "Çocuk Bileşeni",
 aksesuarlar: {
 başlık: {
 tür: Dize,
 varsayılan: "Varsayılan Başlık",
 },
 İleti: {
 tür: Dize,
 varsayılan: "Varsayılan Mesaj",
 },
 e-postaAdresi: {
 tür: Dize,
 gerekli: doğru,
 },
 },
};
senaryo>

Bu kod bloğu, bir üst bileşenden bir alt bileşene veri aktarmak için prop'ları kullanan bir Vue.js bileşeni örneğidir. Kod bloğu, bu destekleri bir türe ve varsayılan değere veya gerekli bir bayrağa sahip nesneler olarak tanımlar.

Kod bloğu şunları tanımlar: başlık Ve İleti a ile dizeler olarak sahne varsayılan değer ve e-postaAdresi pervane olarak gerekli sicim.

Vue Uygulamanıza Uygun En İyi Yöntemi Seçin

Sahne öğelerini hem dizi hem de nesne olarak nasıl tanımlayacağınızı öğrendiniz. Tercihiniz, uygulamanızın özel ihtiyaçlarına uygun olmalıdır.

Vue, kendisini çok esnek bir JavaScript çerçevesi olarak kanıtlıyor. Çalışmayı seçtiğiniz herhangi bir seçenek veya yöntem için farklı avantajlarla aynı hedefe ulaşmak için birçok yöntem ve seçenek sunar.