Components Is coincheap ríthábhachtach iad in Vue.js a ligeann duit feidhmchláir ghréasáin struchtúrtha agus inchothaithe a thógáil. Le components, is féidir leat d’iarratas a bhriseadh síos ina chodanna beaga féinchuimsitheacha, gach ceann acu freagrach as cuid ar leith den chomhéadan úsáideora.
San Airteagal seo, déanfaimid iniúchadh ar an gcaoi le cruthú components i Vue.js, iad a úsáid chun cód a athúsáid, agus sonraí a chur ar aghaidh idir components. Déanfaimid iniúchadh ar úsáid props chun sonraí a chur ar aghaidh ó chomhpháirt tuismitheora go comhpháirt linbh, agus úsáid a bhaint as teagmhais chun sonraí a chur ar aghaidh ó chomhpháirt leanaí ar ais go dtí an chomhpháirt tuismitheoir.
1. Ag cruthú Components
Components in Vue.js a chruthú ag baint úsáide as an modh `Vue.component` nó trí chomhad aonair a shainiú components.
Sampla:
// 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. Struchtúr na Comhpháirte
Is éard atá i gcomhpháirt Vue ná teimpléad, script, agus stíleanna roghnacha. Tá an marcáil HTML sa teimpléad, tá na roghanna comhpháirte(sonraí, modhanna, airíonna ríofa, crúcaí saolré) sa script, agus sainíonn stíleanna cuma an chomhpháirte.
Sampla:
<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. Ath-inúsáidteacht na Comhpháirte
Components in Vue.js a athúsáid ar fud d’fheidhmchláir, ag laghdú dúbailt cóid agus ag feabhsú inchothaitheacht. Cuireann siad cur chuige modúlach chun cinn, rud a ligeann duit cinn níos lú a chumadh components ina cinn níos mó.
Sampla:
// 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 ligean duit sonraí a chur ar aghaidh ó thuismitheoir components go leanbh components. Props a dhearbhú sa chomhpháirt leanbh agus is féidir iad a úsáid cosúil le hairíonna sonraí rialta.
Sampla:
// 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. Imeachtaí an Chustaim
Components is féidir leo imeachtaí saincheaptha a astú chun cumarsáid a dhéanamh lena dtuismitheoirí components. Is féidir le tuismitheoir components éisteacht leis na himeachtaí seo agus freagairt dá réir.
Sampla:
// 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>
Léiríonn na samplaí seo príomhchoincheapa Vue.js components, ag taispeáint a solúbthachta, a n-ath-inúsáidte agus a gcumas cumarsáide. Components cabhrú le cód modúlach agus inchothaithe a chruthú, rud a fhágann gur creat cumhachtach é Vue.js chun feidhmchláir inscálaithe a thógáil.