Components janë një koncept thelbësor në Vue.js që ju lejon të ndërtoni aplikacione ueb të strukturuar dhe të mirëmbajtur. Me components, ju mund ta zbërtheni aplikacionin tuaj në pjesë të vogla, të pavarura, secila përgjegjëse për një pjesë specifike të ndërfaqes së përdoruesit.
Në këtë artikull, ne do të shqyrtojmë se si të krijojmë components në Vue.js, t'i përdorim ato për të ripërdorur kodin dhe të kalojmë të dhëna midis components. Ne do të shqyrtojmë përdorimin props për të kaluar të dhëna nga një komponent prind te një komponent fëmijëror dhe përdorimin e ngjarjeve për të kaluar të dhënat nga një komponent fëmijësh në komponentin e tij prind.
1. Krijimi Components
Components në Vue.js mund të krijohet duke përdorur metodën `Vue.component` ose duke përcaktuar një skedar të vetëm components.
Shembull:
// 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. Struktura e komponentit
Një komponent Vue përbëhet nga një shabllon, skript dhe stile opsionale. Shablloni përmban shënjimin HTML, skripti përmban opsionet e komponentit(të dhënat, metodat, vetitë e llogaritura, fiksimet e ciklit jetësor) dhe stilet përcaktojnë pamjen e komponentit.
Shembull:
<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. Ripërdorimi i komponentit
Components në Vue.js mund të ripërdoret në aplikacionin tuaj, duke reduktuar dyfishimin e kodit dhe duke përmirësuar mirëmbajtjen. Ato promovojnë një qasje modulare, duke ju lejuar të kompozoni më të vogla components në më të mëdha.
Shembull:
// 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 ju lejon të kaloni të dhëna nga prindi components tek fëmija components. Props deklarohen në komponentin fëmijë dhe mund të përdoren si vetitë e zakonshme të të dhënave.
Shembull:
// 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. Ngjarjet e personalizuara
Components mund të emetojnë ngjarje të personalizuara për të komunikuar me prindin e tyre components. Prindi components mund t'i dëgjojë këto ngjarje dhe të reagojë në përputhje me rrethanat.
Shembull:
// 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>
Këta shembuj shfaqin konceptet kryesore të Vue.js components, duke demonstruar fleksibilitetin, ripërdorimin dhe aftësitë e tyre të komunikimit. Components ndihmoni në krijimin e kodit modular dhe të mirëmbajtur, duke e bërë Vue.js një kornizë të fuqishme për ndërtimin e aplikacioneve të shkallëzueshme.