I template-delen af et component kan man lave et helt website, hvor indholdet i templaten er dynamisk ift. data-objektet i scriptet. Det kan dog være uoverskueligt så derfor giver det mening at lave flere components. Det kan f.eks. være header- eller footer-delen af et website, men det kan også være mindre components som f.eks. et component til et enkelt billede.
Root component
En Vue-app vil altid have et root component. Opretter man et projekt med Vue CLI vil det i udgangspunktet altid være filen app.vue. Dette component er det, der først bliver loadet in i DOMen og alle andre components i en Vue App bliver nestet i dette root component.
Child components
Components der sættes ind i andre components kaldes child components. Når der oprettes et projekt med Vue CLI oprettes der en mappe med navnet components. Her i kan man lave sin egen mappestruktur og man kan også ligge components uden for mappen, men i dette indlæg laves der et component i denne mappe.
I mappen components oprettes filen MyComp.vue. I denne fil laves der et component som så nestes i app.vue.
/* MyComp.vue */
<template>
<div class="splashscreen">
<h2>Indhold fra et child component</h2>
</div>
</template>
<style scoped>
h1 {
font-size: 20px;
padding: 50px 10px;
text-align: center;
}
.splashscreen {
background-color: lightblue;
border-radius: 5px;
position: fixed;
left: 50%;
max-width: 96%;
top: 50%;
transform: translate(-50%, -50%);
width: 768px;
}
</style>Ovenstående component er et eksempel på et child component. Her i kan man også have dynamisk data i et script som set tidligere. Dette eksempel er dog kun som eksempel. Læg mærke til at scoped er sat som attribute på style-elementet. Dette gør, at de styles, der er sat kun er gældende for dette component. Det vil være en vurderingssag fra component til component om styles skal gælde for alle components eller kun dette.
Her under ses, hvordan MyComp importeres til App.vue og bruges i App.vue’s template.
/* App.vue */
<template>
<h1>{{ title }}</h1>
<MyComp />
</template>
<script>
import MyComp from './components/MyComp'
export default {
name: 'App',
components: {
MyComp
},
data() {
return {
title: "Min første Vue App"
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
App får sit eget template-tag når det vue-filen er importeret i scriptet og registreret i components-objektet.
- Introduktion til VueJS
- Vue – Events
- Vue – Methods
- Vue – Directives
- Vue – Attribute binding
- Vue – Computed properties
- Vue – refs
Læs mere om Vue
