Components iku konsep wigati ing Vue.js sing ngijini sampeyan kanggo mbangun kabentuk lan maintainable aplikasi web. Kanthi components, sampeyan bisa break mudhun aplikasi menyang cilik, bagean poto-sing, saben tanggung jawab kanggo bagean tartamtu saka antarmuka panganggo.
Ing artikel iki, kita bakal njelajah carane nggawe components ing Vue.js, digunakake kanggo nggunakake maneh kode, lan pass data antarane components. Kita bakal delve menyang nggunakake props kanggo pass data saka komponen induk menyang komponen anak, lan nggunakake acara kanggo pass data saka komponen anak bali menyang komponen induk.
1. Nggawe Components
Components ing Vue.js bisa digawe nggunakake metode `Vue.component` utawa kanthi nemtokake file siji components.
Tuladha:
// 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 kasusun saka cithakan, skrip, lan gaya opsional. Cithakan kasebut ngemot markup HTML, skrip ngemot opsi komponen(data, metode, properti komputasi, pancing siklus urip), lan gaya nemtokake tampilan komponen kasebut.
Tuladha:
<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. Komponen bisa digunakake maneh
Components ing Vue.js bisa digunakake maneh ing aplikasi sampeyan, nyuda duplikasi kode lan nambah maintainability. Dheweke promosi pendekatan modular, ngidini sampeyan nggawe sing luwih cilik components dadi luwih gedhe.
Tuladha:
// 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 ngidini sampeyan ngirim data saka wong tuwa components menyang anak components. Props diumumake ing komponen anak lan bisa digunakake kaya sifat data biasa.
Tuladha:
// 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 adat
Components bisa ngetokake acara khusus kanggo komunikasi karo wong tuwa components. Wong tuwa components bisa ngrungokake acara kasebut lan menehi reaksi.
Tuladha:
// 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>
Conto-conto iki nampilake konsep-konsep utama Vue.js components, sing nuduhake keluwesan, bisa digunakake maneh, lan kemampuan komunikasi. Components mbantu nggawe kode modular lan maintainable, nggawe Vue.js framework kuat kanggo mbangun aplikasi keukur.