Components to kluczowa koncepcja w Vue.js, która pozwala budować ustrukturyzowane i łatwe w utrzymaniu aplikacje internetowe. Dzięki programowi components możesz podzielić swoją aplikację na małe, niezależne części, z których każda odpowiada za określoną część interfejsu użytkownika.
W tym artykule przyjrzymy się, jak tworzyć components w Vue.js, wykorzystywać je do ponownego wykorzystania kodu i przekazywać dane między components. Zajmiemy się wykorzystaniem props do przekazywania danych z komponentu nadrzędnego do komponentu podrzędnego oraz wykorzystaniem zdarzeń do przekazywania danych z komponentu podrzędnego z powrotem do jego komponentu nadrzędnego.
1. Tworzenie Components
Components w Vue.js można utworzyć za pomocą metody `Vue.component` lub definiując plik single components.
Przykład:
// 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 komponentów
Komponent Vue składa się z szablonu, skryptu i opcjonalnych stylów. Szablon zawiera znaczniki HTML, skrypt zawiera opcje komponentu(dane, metody, obliczone właściwości, zaczepy cyklu życia), a style definiują wygląd komponentu.
Przykład:
<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. Ponowne użycie komponentów
Components w Vue.js można ponownie wykorzystać w aplikacji, redukując powielanie kodu i poprawiając łatwość konserwacji. Promują podejście modułowe, pozwalające komponować mniejsze components w większe.
Przykład:
// 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 pozwalają na przekazywanie danych od rodzica components do dziecka components. Props są zadeklarowane w komponencie potomnym i mogą być używane jak zwykłe właściwości danych.
Przykład:
// 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. Wydarzenia niestandardowe
Components mogą emitować zdarzenia niestandardowe w celu komunikowania się ze swoim rodzicem components. Rodzic components może słuchać tych wydarzeń i odpowiednio reagować.
Przykład:
// 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>
Te przykłady przedstawiają kluczowe koncepcje Vue.js components, demonstrując ich elastyczność, możliwość ponownego użycia i możliwości komunikacyjne. Components pomagają tworzyć modułowy i łatwy w utrzymaniu kod, dzięki czemu Vue.js jest potężnym frameworkiem do budowania skalowalnych aplikacji.