Components Mahimman ra'ayi ne a cikin Vue.js wanda ke ba ku damar gina ƙayyadaddun aikace-aikacen gidan yanar gizo da ake iya kiyayewa. Tare da components, zaku iya rushe aikace-aikacen ku zuwa ƙananan sassa, masu zaman kansu, kowannensu yana da alhakin takamaiman yanki na ƙirar mai amfani.
A cikin wannan labarin, za mu bincika yadda ake ƙirƙira components a cikin Vue.js, amfani da su don sake amfani da lamba, da shigar da bayanai tsakanin components. Za mu zurfafa cikin amfani props da aika bayanai daga bangaren iyaye zuwa bangaren yara, da kuma amfani da abubuwan da suka faru don mika bayanai daga bangaren yara har zuwa bangaren iyayensa.
1. Ƙirƙira Components
Components a cikin Vue.js ana iya ƙirƙira ta ta amfani da hanyar `Vue.component` ko ta ma'anar fayil guda ɗaya components.
Misali:
// 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. Tsarin sassa
Bangaren Vue ya ƙunshi samfuri, rubutun, da salo na zaɓi. Samfurin yana ƙunshe da alamar HTML, rubutun yana ƙunshe da zaɓuɓɓukan ɓangaren(bayanai, hanyoyin, ƙididdiga kaddarorin, ƙugiya na rayuwa), da salo suna bayyana fasalin ɓangaren.
Misali:
<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. Sake amfani da sashi
Components a cikin Vue.js za a iya sake amfani da su a cikin aikace-aikacen ku, rage kwafin lambar da haɓaka haɓakawa. Suna haɓaka tsarin tsari, yana ba ku damar tsara ƙarami components zuwa manyan.
Misali:
// 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 ba ka damar aika bayanai daga iyaye components zuwa yaro components. Props ana bayyana su a cikin sashin yara kuma ana iya amfani da su kamar kaddarorin bayanai na yau da kullun.
Misali:
// 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. Abubuwan al'ada
Components na iya fitar da al'amuran al'ada don sadarwa tare da iyayensu components. Iyaye components na iya sauraron waɗannan abubuwan da suka faru kuma su amsa daidai.
Misali:
// 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>
Waɗannan misalan suna nuna mahimman ra'ayoyi na Vue.js components, suna nuna sassauci, sake amfani da su, da damar sadarwa. Components taimaka ƙirƙira na'ura mai daidaitawa da lambar da za a iya kiyayewa, yana mai da Vue.js ƙaƙƙarfan tsari don gina aikace-aikace masu ƙima.