Components Vue.js'de yapılandırılmış ve bakımı yapılabilir web uygulamaları oluşturmanıza izin veren çok önemli bir kavramdır. ile components uygulamanızı, her biri kullanıcı arabiriminin belirli bir bölümünden sorumlu olan küçük, bağımsız parçalara ayırabilirsiniz.
components Bu makalede, Vue.js'de nasıl oluşturulacağını, kodu yeniden kullanmak için nasıl kullanılacağını ve components. props Bir üst bileşenden bir alt bileşene veri aktarmak için kullanmayı ve bir alt bileşenden tekrar üst bileşene veri aktarmak için olayları kullanmayı inceleyeceğiz .
1. Oluşturma Components
Components Vue.js'de "Vue.component" yöntemi kullanılarak veya single-file tanımlanarak oluşturulabilir components.
Örnek:
// Global Component using Vue.component
Vue.component('my-component', {
// Component options
});
// Local Component using single-file component
// MyComponent.vue
<template>
<!-- Component template -->
</template>
<script>
export default {
// Component options
};
</script>
2. Bileşen Yapısı
Bir Vue bileşeni, bir şablon, komut dosyası ve isteğe bağlı stillerden oluşur. Şablon HTML işaretlemesini içerir, komut dosyası bileşen seçeneklerini(veriler, yöntemler, hesaplanan özellikler, yaşam döngüsü kancaları) içerir ve stiller bileşenin görünümünü tanımlar.
Örnek:
<template>
<div>
<h1>{{ message }}</h1>
<button @click="increment">Increment</button>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, Vue!',
count: 0
};
},
methods: {
increment() {
this.count++;
}
}
};
</script>
<style scoped>
/* Component styles */
</style>
3. Bileşen Yeniden Kullanılabilirliği
Components Vue.js'de uygulamanız genelinde yeniden kullanılabilir, bu da kod tekrarını azaltır ve sürdürülebilirliği artırır. components Modüler bir yaklaşımı teşvik ederek, daha küçük olanlardan daha büyük olanları oluşturmanıza olanak tanır .
Örnek:
// ParentComponent.vue
<template>
<div>
<child-component></child-component>
<child-component></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
}
};
</script>
4. Props
Props components ebeveynden çocuğa veri aktarmanıza izin verir components. Props alt bileşende bildirilir ve normal veri özellikleri gibi kullanılabilir.
Örnek:
// ParentComponent.vue
<template>
<div>
<child-component:message="parentMessage"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
parentMessage: 'Hello from parent!'
};
}
};
</script>
// ChildComponent.vue
<template>
<div>
<h2>{{ message }}</h2>
</div>
</template>
<script>
export default {
props: ['message']
};
</script>
5. Özel Etkinlikler
Components ebeveynleriyle iletişim kurmak için özel olaylar yayabilir components. Ebeveyn components bu olayları dinleyebilir ve buna göre tepki verebilir.
Örnek:
// ChildComponent.vue
<template>
<div>
<button @click="increment">Increment</button>
</div>
</template>
<script>
export default {
methods: {
increment() {
this.$emit('increment-event');
}
}
};
</script>
// ParentComponent.vue
<template>
<div>
<child-component @increment-event="handleIncrement"></child-component>
<p>Count: {{ count }}</p>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
count: 0
};
},
methods: {
handleIncrement() {
this.count++;
}
}
};
</script>
Bu örnekler, Vue.js'nin temel kavramlarını sergileyerek components esnekliklerini, yeniden kullanılabilirliklerini ve iletişim yeteneklerini gösterir. Components Vue.js'yi ölçeklenebilir uygulamalar oluşturmak için güçlü bir çerçeve haline getirerek modüler ve sürdürülebilir kod oluşturmaya yardımcı olur.