Vue只渲染第一个自定义组件问题

Question

我有一个简单的 Vue 应用程序，我正在尝试渲染多个自定义组件，这就是我正在尝试的：

JS

Vue.component('refinement-list', {
  props: ['attribute', 'title'],
  template: '<div>{{attribute}} - {{title}}</div>'
});

new Vue({
  el: '#app'
});

超文本标记语言

<div id="app">
  <refinement-list attribute="test" title="Test" />
  <refinement-list attribute="sample" title="Sample" />
</div>

但是问题是仅渲染第一个组件，请参阅工作示例： https: //codepen.io/javiervd/pen/vYBpQMm

我尝试在本地注册该组件，但没有成功。我还在我的应用程序中使用带有脚本标记的 Vue，因为我无法为这个特定项目使用构建系统，不确定这是否重要。

有人能指出我正确的方向吗？谢谢。

Answer 1

由于您是在 DOM 中定义模板，因此您不能对自定义组件使用自闭合标签。

这应该有效：

<div id="app">
  <refinement-list attribute="test" title="Test"></refinement-list>
  <refinement-list attribute="sample" title="Sample"></refinement-list>
</div>

模板字符串或单文件组件中不存在此限制。

您可以在这里阅读更多相关信息：https://v2.vuejs.org/v2/style-guide/#Self-ending-components-strongly-recommended