Opprettelse av underkomponenter i Vue

Komponenter har innvendig samme struktur som hovedkomponenten vi jobbet med tidligere. Det vil si at i filen til hver komponent vil det være taggene script og template.

La oss for eksempel lage en komponent med navnet User. Vi plasserer koden i den tilsvarende filen:

components/User.vue<script>
  export default {
    data() {
      return {
        
      }
    }
  }
</script>

I objektet data til komponenten kan man plassere noe data:

components/User.vue<script>
  export default {
    data() {
      return {
        name: 'john'
      }
    }
  }
</script>

Denne dataen kan vises i visningen til komponenten:

components/User.vue<template>
  {{ name }}
</template>

La oss nå koble den opprettede komponenten vår til hovedkomponenten. For å gjøre dette må vi først importere den:

App.vue<script>
  import User from './components/User.vue'
  
  export default {
    
  }
</script>

La oss skrive navnet i innstillingen components:

App.vue<script>
  import User from './components/User.vue'
  
  export default {
    components: {
      User
    }
  }
</script>

I visningen til foreldrekomponenten kan man vise visningen til underkomponenten. For å gjøre dette må man skrive en tagg hvis navn tilsvarer navnet på komponenten. La oss gjøre dette:

App.vue<template>
  <User />
</template>