如何从另一个组件调用 VueJS 组件

Posted 2023-02-23

【中文标题】如何从另一个组件调用 VueJS 组件

【英文标题】：How to call VueJS component from another component

【发布时间】：2019-06-12 20:00:30

【问题描述】：

我是 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.

我该如何解决这个问题？

【参考方案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>