Vue Bileşenlerine Giriş

Giriş

Büyük bir uygulama geliştirirken, kodun okunmasını, yapılandırılmasını ve bakımını kolaylaştırmak için onu daha küçük bileşenlere ayırmak her zaman iyi bir fikirdir. Vue'ya yeni başlayanların çoğu, en azından kavramsal olarak hangi bileşenlerin ne olduğunu anlar, ancak neleri yapıp neyi yapamadıklarını tam olarak anlamayabilirler.

Bu kılavuzda, Vue'daki bir bileşenin ne olduğuna, nasıl çalıştığına, bunlar aracılığıyla veri ve olayların nasıl iletileceğine ve çok daha fazlasına göz atacağız.

Vue Bileşeni nedir?

Bileşenler şablonlar, stiller ve JavaScript öğeleri içeren Vue öğelerinin yeniden kullanılabilir örnekleridir. Her bir HTML öğesinin nasıl "kendine ait bir şey" olduğuna benzer şekilde, her bileşen de "kendine ait bir şeydir" ve hem Vue bileşenleri hem de HTML öğeleri, bunları web sayfaları için yapı taşları olarak kullanmamıza izin verir.

Vue bileşenlerini, kendi tanımlayabileceğiniz ve değiştirebileceğiniz, JavaScript ile doldurulmuş HTML öğeleri olarak düşünebilirsiniz.

Tipik bir Vue uygulaması, gerektiği kadar tekrar kullanılabilen çok sayıda bileşenden oluşur.

Örneğin, normal bir web sitesinde tüm sayfalarda görünen bölümler bulunur - gezinti çubuğu, üst bilgi, alt bilgi vb. Bu nedenle, her birini ayrı bir bileşen haline getirmek iyi bir uygulama olarak kabul edilir. Bu şekilde, iyi yapılandırılmış, okunabilir, yeniden kullanılabilir ve bakımı kolay bir kod oluşturuyoruz:

Vue Bileşeni Nasıl Oluşturulur

Projemizin nasıl oluşturulduğuna bağlı olarak bir Vue bileşeni oluşturmanın iki temel yolu vardır – yapı kurulumu olan veya olmayan. İlk durumda, her bileşen ayrı bir dosyada saklanır. İkinci durumda, tek bir dosyada birden çok bileşen olabilir.

Derleme Kurulumuyla Vue Bileşenleri Oluşturma

Çoğu proje kullanılarak oluşturulur kurulum kurulumuTek Dosya Bileşenleri oluşturmamızı sağlayan (SFC'ler) – özel bileşen dosyaları ile .vue eklenti. Bu, bir Vue bileşeninin şablonunu, mantığını ve stilini tek bir dosyada özetlememize olanak tanır:

<!-- Vue-specific JavaScript -->
<script> export default { data() { return { title: 'Hello World!' } } }
</script> <!-- HTML Template -->
<template> <div> <p class="title">{{ title }}</p> </div>
</template> <!-- CSS Styling -->
<style>
.title { color: red;
}
</style>

Derleme Kurulumu Olmadan Vue Bileşenleri Oluşturma

Herhangi bir nedenle aşağıdaki gibi bir paket yöneticisi kullanamıyorsanız: npm Vue'yu makinenize kurmak için uygulamanızda Vue'yu kullanmaya devam edebilirsiniz. Vue kullanarak binaya bir alternatif npm aracılığıyla Vue yüklemektir. CDN (İçerik Dağıtım Ağı) doğrudan uygulamanızda. Bir Vue bileşeni oluşturmanın bu yolunu hızlıca gözden geçirelim.

Vue'yu oluşturmadan yüklemek, düz JavaScript'te yaptığımız gibi Vue'ye özgü işlevleri kullanmamızı sağlayacaktır. Sözdizimi, olağan SFC'lerde gördüğümüze biraz benzer:

export default { data() { return { title: 'Hello World!' } }, template: ` <div> <p class="title">{{ title }}</p>. </div>`
}

Bu kılavuzda, kullanacağız SFC sözdizimi, bileşen oluşturmanın en yaygın kullanılan yöntemi olduğu için.

Bileşenleri Vue'da Kaydetme

Şimdiye kadar, Vue.js'de bileşenlerin nasıl oluşturulacağını gördük. Bir sonraki adım, bu bileşenleri başka bir bileşen içinde kullanmak olacaktır. (ebeveyn-çocuk hiyerarşisi).

Bunu yapmak için önce kullanmak istediğimiz bileşenleri kaydetmemiz gerekir. Bu kayıt, bileşenlerin içe aktarılmasını ve ardından kaydedilmesini gerektirir. Bunu yapmak için iki seçenek vardır – global ve yerel kayıt.

Vue Bileşenleri – Küresel Kayıt

Global olarak kayıtlı bileşenler, adından da anlaşılacağı gibi, global olarak mevcuttur, yani uygulamamızın herhangi bir bileşeninde onları tekrar almak zorunda kalmadan kullanılabilirler. Bu, kullanılarak bir bileşenin kaydedilmesiyle gerçekleştirilir. app.component() yöntem:

import ChildComponent from './App.vue' app.component('ChildComponent', ChildComponent)

Birçok bileşene sahip olduğumuz bir durumda, zincir onları bu şekilde:

app .component('ChildComponent', ChildComponent) .component('ProfileComponent', ProfileComponent)

Bileşenlerimizi kaydettikten sonra, bunları aşağıdaki sözdizimini kullanarak bu uygulamadaki herhangi bir bileşenin şablonunda kullanabiliriz:

<ChildComponent/>
<ProfileComponent/>

Vue Bileşenleri – Yerel Kayıt

Çoğu durumda yerel kaydı kullanacağız çünkü bu, kayıtlı bileşenlerimizin kullanılabilirliğini kapsamamıza izin veriyor. Bu bileşenleri içe aktarma ve ardından bunları components seçeneği bunu gerçekleştirir:

<script>
import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent }
}
</script> <template> <ChildComponent />
</template>

Bileşenleri adlandırırken, CamelKılıf bunun şablonlardaki yerel bir HTML öğesinden ziyade bir Vue bileşeni olduğunu netleştirmek için. Bu, JavaScript'te bileşenlerin içe aktarılmasını ve kaydedilmesini de kolaylaştırır.

Vue Bileşenleri Üzerinden Veri Aktarma

Bileşen oluşturmanın faydalarından biri, kodu modüler hale getirerek yeniden kullanabilme yeteneğidir.

Her öğrencinin verilerini profil sayfasından alması gereken bir kullanıcı profili bileşeni oluşturduğumuzu varsayalım; bu durumda, bu verileri profil bileşeninden (ana bileşen) kullanıcı profili bileşenine (alt bileşen) iletmeliyiz ve props kullanacağız.

destekler

Prop'lar, bir bileşene kaydedebileceğimiz özel niteliklerdir, böylece ana bileşenden alt bileşene veri aktarabiliriz. props komut dosyası etiketi içindeki seçenek:

<script>
export default { props: { title: String, }
}
</script> <template> <h4>{{ title }}</h4>
</template>

yuvaları

Vue yuvaları, her türlü içeriği bir bileşenden diğerine geçirmemize izin veren ayrılmış alanlardır. Bu, donanımlardan daha merkezi bir kontrol sağlar çünkü donanımlardan farklı olarak ana bileşen, alt bileşenin içindeki içeriği kontrol eder. Örneğin, aşağıdaki düğmeyi yapabiliriz:

<!-- my-button.vue -->
<template> <button class="btn btn-style"> <slot>Click Me</slot> </button>
</template>

Daha sonra bu bileşeni istediğimiz yerde kullanabilir ve ona istediğimiz içeriği verebiliriz. Bir içerik verilmemesi, ona verdiğimiz varsayılan değeri kullanacağı anlamına gelir (Beni Tıklayın):

<!-- my-form.vue -->
<template> <my-button> Submit Form <img src="/img/icons/arrow-icon.jpg"> </my-button>
</template>

Olayları Vue Bileşenlerinden Yayma

Propların ana bileşenden alt bileşene veri göndermek için kullanıldığını öğrendik. Ancak alt bileşenden üst bileşene bir şey göndermenin bir yolu olup olmadığını merak edebiliriz. Ve cevap Evet, olaylar alt bileşenden üst bileşene de gönderilebilir.

Bir üst bileşenimiz olduğunu varsayalım (App.vue) tek bir alt bileşen içeren (MyBlogPost.vue). Ayrıca alt bileşen, başlığı değiştirmesi beklenen bir düğme içerir.

Bir düğme tıklandığında sayfamızın başlığını değiştirmek istediğimizi varsayalım, böylece bir işlev tetiklenir:

<!-- App.vue -->
<script>
import MyBlogPost from './BlogPost.vue' export default { components: { MyBlogPost }, data() { return { title: "Hello World" } }, methods:{ changeText: function(){ this.title = "New Title" } }
}
</script> <template> <div> <MyBlogPost :title="title" @change-text=changeText></MyBlogPost> </div>
</template>

Ve alt bileşen şöyle görünecektir:

<!-- MyBlogPost.vue -->
<script>
export default { props: ['title'], emits: ['change-text']
}
</script> <template> <div class="blog-post"> <h4>{{ title }}</h4> <button @click="$emit('change-text')">Change Title</button> </div>
</template>

Sonuç

Bu kılavuzda, Vue kullanan herkes için gerekli olan Vue'daki bileşenlerle nasıl çalışılacağını öğrendik. Ayrıca nasıl veri gönderilip alınacağını ve olayların nasıl yayılacağını da öğrendik.

• SEO Destekli İçerik ve Halkla İlişkiler Dağıtımı. Bugün Gücünüzü Artırın.
• Plato blok zinciri. Web3 Metaverse Zekası. Bilgi Güçlendirildi. Buradan Erişin.
• Kaynak: https://stackabuse.com/introduction-to-vue-components/