Components yra esminė Vue.js koncepcija, leidžianti kurti struktūrizuotas ir prižiūrimas žiniatinklio programas. Naudodami components, galite suskirstyti programą į mažas, atskiras dalis, kurių kiekviena yra atsakinga už tam tikrą vartotojo sąsajos dalį.
Šiame straipsnyje mes išnagrinėsime, kaip kurti components Vue.js, naudoti juos pakartotinai naudoti kodą ir perduoti duomenis tarp components. Išsiaiškinsime, kaip props perduoti duomenis iš pirminio komponento į antrinį komponentą ir kaip naudoti įvykius, kad perkeltume duomenis iš antrinio komponento į pirminį komponentą.
1. Kūrimas Components
Components „Vue.js“ gali būti sukurta naudojant „Vue.component“ metodą arba apibrėžiant vieną failą components.
Pavyzdys:
// 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. Komponentų struktūra
„Vue“ komponentą sudaro šablonas, scenarijus ir pasirenkami stiliai. Šablone yra HTML žymėjimas, scenarijuje yra komponento parinktys(duomenys, metodai, apskaičiuotos savybės, gyvavimo ciklo kabliukai), o stiliai apibrėžia komponento išvaizdą.
Pavyzdys:
<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. Komponentų pakartotinis naudojimas
Components Vue.js gali būti pakartotinai naudojamas visoje jūsų programoje, sumažinant kodo dubliavimą ir pagerinant priežiūrą. Jie skatina modulinį metodą, leidžiantį sudaryti mažesnius components į didesnius.
Pavyzdys:
// 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 leidžia perduoti duomenis iš tėvų components vaikui components. Props yra deklaruojami antriniame komponente ir gali būti naudojami kaip įprastos duomenų savybės.
Pavyzdys:
// 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. Pasirinktiniai įvykiai
Components gali skleisti pasirinktinius įvykius, kad galėtų bendrauti su savo tėvais components. Tėvai components gali klausytis šių įvykių ir atitinkamai reaguoti.
Pavyzdys:
// 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>
Šiuose pavyzdžiuose demonstruojamos pagrindinės Vue.js sąvokos components, parodančios jų lankstumą, pakartotinį naudojimą ir bendravimo galimybes. Components padėti sukurti modulinį ir prižiūrimą kodą, todėl „Vue.js“ yra galinga sistema kuriant keičiamo dydžio programas.