时间戳

首页 > 解决方案 > 无法在组件内渲染组件

javascript - 无法在组件内渲染组件

问题描述

我有非常基本的 Vue 应用程序（在 Rails 上）：

你好_vue.js：

import Vue from 'vue/dist/vue.esm'
import TurbolinksAdapter from 'vue-turbolinks'
Vue.use(TurbolinksAdapter)

import CollectionSet from '../collection_set.vue'

document.addEventListener('turbolinks:load', () => {
  const app = new Vue({
    el: '#app',
    components: { CollectionSet }
  })
})

集合集.vue：

<script>
import Collectable from './collectable.vue'
export default {
  components: { Collectable }
}
</script>

<template>
  <p>test</p>
  <collectable />
</template>

收藏品.vue:

<script>
export default {
  name: 'collectable'
}
</script>
<template>
  <p>test 2</p>
</template>

我的网页：

<div id="app"><collection-set /></div>

在上面的示例中，我什么都看不到，但是当我从 中删除<collectable />时collection_set.vue，我看到了test. 我没有任何错误。

为什么collectable没有被渲染？

标签： javascriptvue.js

解决方案

template将collection_set.vue的代码更改为

<template>
 <div>
    <p>test</p>
  <collectable />
</div>
</template>

错误的原因是在Component template should contain exactly one root element 这里我们试图创建两个根元素p和collectable

现在我将它包装在一个父div容器中，它工作得很好。请尝试让我知道它是否有帮助。

一个建议是始终检查浏览器开发工具的控制台以检查可能是什么问题。在这种情况下，控制台给出了确切的错误，代码编译也因同样的错误而失败。

推荐阅读