Vue - включить Vue файл в другой Vue файл

Question

Я новичок в Vue.

Я создал несколько элементов (я использую компоненты элементов), и код становится слишком длинным. Я хотел бы знать, есть ли способ создать несколько Vue файлов и включить их все в один? Например, у меня есть Navbar. vue, Header. vue, Footer. vue и Body. vue.

Я хочу включить их все в один файл.

Возможно ли это?

Answer 1

Конечно. Вы импортируете и используете их, как в моем примере. Не забудьте зарегистрировать их в components, как видите.

Это может быть ваш app.vue файл

<template>
  <div id="app" class="container">
    <the-header />
    <!-- this could be <TheHeader /> depending on your setup -->

    <the-navigation /> 
    <!-- this could be <TheNavigation /> depending on your setup --> 
  </div>
</template>

<script>
import TheHeader from '@/components/the-header.vue'
import TheNavigation from '@/components/the-navigation.vue'

export default {
  name: 'app',
  components: {
    TheHeader,
    TheNavigation
  }
</script>

<style lang="scss">
</style>