Components ialah konsep penting dalam Vue.js yang membolehkan anda membina aplikasi web berstruktur dan boleh diselenggara. Dengan components, anda boleh memecahkan aplikasi anda kepada bahagian kecil yang serba lengkap, masing-masing bertanggungjawab untuk bahagian tertentu antara muka pengguna.
Dalam artikel ini, kami akan meneroka cara membuat components dalam Vue.js, menggunakannya untuk menggunakan semula kod dan menghantar data antara components. Kami akan mendalami penggunaan props untuk menghantar data daripada komponen induk kepada komponen anak dan menggunakan peristiwa untuk menghantar data daripada komponen anak kembali ke komponen induknya.
1. Mencipta Components
Components dalam Vue.js boleh dibuat menggunakan kaedah `Vue.component` atau dengan mentakrifkan fail tunggal components.
Contoh:
// 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. Struktur Komponen
Komponen Vue terdiri daripada templat, skrip dan gaya pilihan. Templat mengandungi penanda HTML, skrip mengandungi pilihan komponen(data, kaedah, sifat dikira, cangkuk kitar hayat) dan gaya menentukan penampilan komponen.
Contoh:
<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. Kebolehgunaan Semula Komponen
Components dalam Vue.js boleh digunakan semula merentas aplikasi anda, mengurangkan pertindihan kod dan meningkatkan kebolehselenggaraan. Mereka mempromosikan pendekatan modular, membolehkan anda mengarang yang lebih kecil components kepada yang lebih besar.
Contoh:
// 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 membenarkan anda menghantar data daripada ibu bapa components kepada anak components. Props diisytiharkan dalam komponen anak dan boleh digunakan seperti sifat data biasa.
Contoh:
// 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. Acara Tersuai
Components boleh mengeluarkan acara tersuai untuk berkomunikasi dengan ibu bapa mereka components. Ibu bapa components boleh mendengar peristiwa ini dan bertindak balas dengan sewajarnya.
Contoh:
// 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>
Contoh ini mempamerkan konsep utama Vue.js components, menunjukkan fleksibiliti, kebolehgunaan semula dan keupayaan komunikasi mereka. Components membantu mencipta kod modular dan boleh diselenggara, menjadikan Vue.js rangka kerja yang berkuasa untuk membina aplikasi berskala.