Vue.component不显示子组件

Question

我使用Vue.extend()和Vue.component()创建并注册该组件。

这是我的代码：

＆＃13;

＆＃13;

var app_nav = Vue.extend({
  template: '<div>app_nav</div>'
})

var app_sidebar = Vue.extend({
  template: '<div>sidebar</div>'
})

var app_content = Vue.extend({
  template: '<div>content</div>'
})

Vue.component('app-nav', app_nav)
Vue.component('app-sidebar', app_sidebar)
Vue.component('app-content', app_content)


var appView = Vue.extend({
  template: '<app-sidebar></app-sidebar><app-content></app-content>'
})

Vue.component('app-view', appView)

var div2 = new Vue({
  el: '#div2'
})

＆＃13;

<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>

<div id="div2">
  <app-view></app-view>
</div>

＆＃13;

＆＃13;

＆＃13;

但在我的Chrome中，它只显示<app-sidebar>标记，为什么不显示<app-content>：

Answer 1

  

每个组件必须只有一个根元素

Read in docs。添加父标记，我在此处添加了div

template: '<div><app-sidebar></app-sidebar><app-content></app-content></div>'

var app_nav = Vue.extend({
  template: '<div>app_nav</div>'
})

var app_sidebar = Vue.extend({
  template: '<div>sidebar</div>'
})

var app_content = Vue.extend({
  template: '<div>content</div>'
})

Vue.component('app-nav', app_nav)
Vue.component('app-sidebar', app_sidebar)
Vue.component('app-content', app_content)


var appView = Vue.extend({
  template: '<div><app-sidebar></app-sidebar><app-content></app-content></div>'
})

Vue.component('app-view', appView)

var div2 = new Vue({
  el:'#div2'
})

<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>

<div id="div2">
    <app-view></app-view>
  </div>