Vue.js 的基本结构组件问题

Question

我尝试在 Vue.js 实例中创建组件的基本结构，以便使用该框架进行训练。

我使用组件的本地声明，我想使用 4 个组件（1 个导航栏 + 3 个卡片引导程序）

如果我不添加导航栏组件，一切都会完美运行。但是如果我添加 componentStatusBar 我会收到以下错误消息：

"组件模板应该只包含一个根元素。如果你 在多个元素上使用 v-if，使用 v-else-if 链接它们 而是”

我不明白为什么这个特定的组件会困扰我所有的系统模板 对于我的 mainContainer Vue 实例？

ma​​inContainer.js 代码：

var componentStatusBar = Vue.component('component-status-bar', {
    template: `
    <nav class="navbar navbar-light bg-light">
      <a class="navbar-brand" href="#">
        <span class="fas fa-stroopwafel"></span>
        Bootstrap
      </a>
    </nav>
    `
})

var componentA = Vue.component('component-a', {
    template: `
<div class="card text-white bg-dark mb-3" style="max-width: 32rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
    `
})

var componentB = Vue.component('component-b', {
    template: `
    <div class="card bg-light mb-3" style="max-width: 32rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
    `
})

var componentC = Vue.component('component-c', {
    template: `
    <div class="card text-white bg-info mb-3" style="max-width: 32rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
    `
})

var mainContainer = new Vue({
    el: '#main-container',
    components: {
      'component-a': componentA,
      'component-b': componentB,
      'component-c': componentC,
      'component-status-bar': componentStatusBar
    },
    template: `
        <component-status-bar></component-status-bar>

        <div class="container-fluid">
            <div class="row">
                <div class="col-md-4">
                    <component-a></component-a>
                </div>
                <div class="col-md-4">
                    <component-b></component-b>                    
                </div>
                <div class="col-md-4">
                    <component-c></component-c>                    
                </div>
            </div>
        </div>
    `,
});

Answer 1

该错误告诉您需要将 mainComponent 包装到 div 中，因为 vue（以及其他类似 angular 或 react）无法处理每个组件超过 1 个的根元素。

var mainContainer = new Vue({
    el: '#main-container',
    components: {
      'component-a': componentA,
      'component-b': componentB,
      'component-c': componentC,
      'component-status-bar': componentStatusBar
    },
    template: `
       <div>  // new
        <component-status-bar></component-status-bar>

        <div class="container-fluid">
            <div class="row">
                <div class="col-md-4">
                    <component-a></component-a>
                </div>
                <div class="col-md-4">
                    <component-b></component-b>                    
                </div>
                <div class="col-md-4">
                    <component-c></component-c>                    
                </div>
            </div>
        </div>
      </div> // new
    `,
});