Как вызвать компонент VueJS из другого компонента

Question

Я новичок в VueJS, у меня есть разные страницы, которые я организовал в «компоненты». Теперь разные страницы имеют разную разметку, например, некоторые страницы не будут включать верхний и нижний колонтитулы (которые также являются отдельными компонентами).

Это код для компонента, который должен включать заголовок

<template>
    <Header />
    <div class="container main-content">
        <div class="row">
            <div class="col-lg-2"></div>
            <div class="col-lg-8">
                <h3 style="font-weight: bold;color: #000;">What will you like to do?</h3>
                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 dash-menu-item">
                    <div class="item-body">
                        <router-link to="/dashboards" class="">
                            <i class="fa fa-user fa-4x"></i>
                            <p>View Dashboards</p>
                        </router-link>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 dash-menu-item">
                    <div class="item-body">
                        <router-link to="/home" class="">
                            <i class="fa fa-cogs fa-4x"></i>
                            <p>Manage Settings</p>
                        </router-link>
                    </div>
                </div>
            </div>
            <div class="col-lg-2"></div>
        </div>
    </div>
</template>
<script>
    import Header from './Header.vue'

    export default{
        name: 'Loyalty',
        components:{
            'Header': Header
        }
    }
</script>

А это мой Header.vue

<template>
    <div>
        <div class="head">
          <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
              <span class="pull-left" style="padding-left: 10px;">
                <router-link to="/home" class="header-text page-link"><span class="fa fa-arrow-left"></span>&nbsp;&nbsp;Home</router-link>
              </span>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 custom-hidden-sm">
              <span class="pull-right" style="padding-right: 10px;">
                <span class="header-text">Waje Loyalty</span>
              </span>
            </div>
          </div>
        </div>
    </div>
</template>
<script>
    export default{
        name: 'Header',
        data(){
            return{
              page_name: this.$router.currentRoute.name
            }
        }
    }
</script>

Когда я компилирую, я получаю ошибку:

- Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

Как я могу решить это?

Answer 1

Проблема вызвана двумя корневыми элементами в шаблоне Loyalty.vue: <Header /> и <div class="container main-content">.

Шаблоны компонентов VueJS могут содержать один и только один корневой узел .

Чтобы решить эту проблему, оберните содержимое шаблона Loyalty.vue с корнем div.

<template>
    <!-- root div -->
    <div> 
      <Header />
      <div class="container main-content">
          <div class="row">
              <div class="col-lg-2"></div>
              <div class="col-lg-8">
                  <h3 style="font-weight: bold;color: #000;">What will you like to do?</h3>
                  <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 dash-menu-item">
                      <div class="item-body">
                          <router-link to="/dashboards" class="">
                              <i class="fa fa-user fa-4x"></i>
                              <p>View Dashboards</p>
                          </router-link>
                      </div>
                  </div>
                  <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 dash-menu-item">
                      <div class="item-body">
                          <router-link to="/home" class="">
                              <i class="fa fa-cogs fa-4x"></i>
                              <p>Manage Settings</p>
                          </router-link>
                      </div>
                  </div>
              </div>
              <div class="col-lg-2"></div>
          </div>
      </div>
    </div>
</template>