Ofte er det kjekt å lage sine egne komponenter, som deretter kan brukes igjen og igjen.

Enveis

Her følger en enkel komponent som gir lite nytte, men som gjør oppsettet forståelig:

<tittel v-bind:tekst=tittel></tittel>

Vue.component("tittel", {
  props: ["tekst"],
  template: "<h1>{{tekst}}</h1>"
});
..
var app = new Vue({
  data: {
    tittel: "Min tittel her"
  }
});

I praksis er <h1> byttet med <tittel>, og når scriptet kjører byttes det bare tilbake.

Toveis

En mye nyttigere komponent er en som tar i mot informasjon:

Opplysning 1: <inndata v-model="opplysning1"></inndata>
Opplysning 2: <inndata v-model="opplysning2"></inndata>
..
Svar: <inndata v-bind="svar"></inndata>

Vue.component("inndata", {
  props: ["tekst"],
  template: `<input type="text" v-bind:value="tekst" v-on:input="$emit('input', $event.target.value)" >`
});

Her får man en fiks ferdig standard inndata-komponent som kan gjenbrukes alle steder. Man slipper da noe av den repetive kodeskrivingen og ekstraarbeidet når noe skal forandres senere.

TBC