Components huma kunċett kruċjali f'Vue.js li jippermettilek tibni applikazzjonijiet tal-web strutturati u li jistgħu jinżammu. Bil- components, tista' tkisser l-applikazzjoni tiegħek f'partijiet żgħar u awtonomi, kull waħda responsabbli għal porzjon speċifiku tal-interface tal-utent.
F'dan l-artikolu, se nesploraw kif noħolqu components f'Vue.js, nużawhom biex nużaw mill-ġdid il-kodiċi, u ngħaddu d-dejta bejn components. Aħna se nidħlu fl-użu props biex ngħaddu d-dejta minn komponent ġenitur għal komponent tifel, u nużaw avvenimenti biex ngħaddu d-dejta minn komponent tifel lura għall-komponent parent tiegħu.
1. Il-ħolqien Components
Components f'Vue.js jistgħu jinħolqu bl-użu tal-metodu `Vue.component` jew billi jiġi definit single-file components.
Eżempju:
// 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. Struttura tal-Komponent
Komponent Vue jikkonsisti minn mudell, skript, u stili fakultattivi. Il-mudell fih il-markup HTML, l-iskrittura fih l-għażliet tal-komponenti(dejta, metodi, proprjetajiet ikkalkulati, ganċijiet taċ-ċiklu tal-ħajja), u l-istili jiddefinixxu d-dehra tal-komponent.
Eżempju:
<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. Użabbiltà mill-ġdid tal-komponenti
Components f'Vue.js jista' jerġa' jintuża fl-applikazzjoni tiegħek, inaqqas id-duplikazzjoni tal-kodiċi u jtejjeb il-manutenzjoni. Huma jippromwovu approċċ modulari, li jippermettilek tikkomponi iżgħar components f'oħrajn akbar.
Eżempju:
// 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 jippermettulek tgħaddi d-data minn ġenitur components għal wild components. Props huma ddikjarati fil-komponent tifel u jistgħu jintużaw bħal proprjetajiet ta 'dejta regolari.
Eżempju:
// 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. Avvenimenti tad-dwana
Components jistgħu jarmu avvenimenti tad-dwana biex jikkomunikaw mal-ġenitur tagħhom components. Il-ġenituri components jistgħu jisimgħu dawn l-avvenimenti u jirreaġixxu kif xieraq.
Eżempju:
// 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>
Dawn l-eżempji juru l-kunċetti ewlenin ta’ Vue.js components, u juru l-flessibbiltà, l-użu mill-ġdid u l-kapaċitajiet ta’ komunikazzjoni tagħhom. Components jgħin fil-ħolqien ta 'kodiċi modulari u li jista' jinżamm, li jagħmel Vue.js qafas b'saħħtu għall-bini ta 'applikazzjonijiet skalabbli.