Components sunt un concept crucial în Vue.js care vă permite să construiți aplicații web structurate și care pot fi întreținute. Cu components, vă puteți împărți aplicația în părți mici, autonome, fiecare responsabilă pentru o anumită porțiune a interfeței cu utilizatorul.
În acest articol, vom explora cum să creați components în Vue.js, să le folosim pentru a reutiliza codul și să transmitem date între components. Vom aprofunda în utilizarea props pentru a trece date de la o componentă părinte la o componentă copil și în utilizarea evenimentelor pentru a transmite date de la o componentă copil înapoi la componenta sa părinte.
1. Crearea Components
Components în Vue.js poate fi creat folosind metoda `Vue.component` sau prin definirea fișierului unic components.
Exemplu:
// 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. Structura componentelor
O componentă Vue constă dintr-un șablon, script și stiluri opționale. Șablonul conține marcajul HTML, scriptul conține opțiunile componente(date, metode, proprietăți calculate, cârlige ciclului de viață), iar stilurile definesc aspectul componentei.
Exemplu:
<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. Reutilizarea componentelor
Components în Vue.js poate fi reutilizat în aplicația dvs., reducând duplicarea codului și îmbunătățind mentenabilitatea. Ele promovează o abordare modulară, permițându-vă să compuneți mai mici components în altele mai mari.
Exemplu:
// 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 vă permit să transmiteți date de la părinte components la copil components. Props sunt declarate în componenta copil și pot fi utilizate ca proprietăți obișnuite ale datelor.
Exemplu:
// 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. Evenimente personalizate
Components pot emite evenimente personalizate pentru a comunica cu părintele lor components. Părintele components poate asculta aceste evenimente și poate reacționa în consecință.
Exemplu:
// 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>
Aceste exemple prezintă conceptele cheie ale Vue.js components, demonstrând flexibilitatea, reutilizarea și capacitățile de comunicare ale acestora. Components ajuta la crearea unui cod modular și care poate fi întreținut, făcând din Vue.js un cadru puternic pentru construirea de aplicații scalabile.