Vue 只呈现第一个自定义组件问题

Question

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

JS

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

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

HTML

<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-closing-components-strongly-recommended

Answer 2

如果你想使用自闭合标签，你应该在 HTML 部分这样给出。 但不推荐用于 DOM 模板

<div id="app">
  <div>
  <refinement-list attribute="test" title="Test1" />
  </div>
  <div>
  <refinement-list attribute="test" title="Test2" />
  </div>
</div>

Answer 3

我分叉了你的 codepen，可以确认这是使用单独的结束标签样式，而不是使用组件的自结束标签。

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

参考： https ://codepen.io/edm00se/pen/pozpqym?editors=1010

自闭合标签与（完整？）闭合标签在 vue 样式指南页面（v2）中进行了讨论，并表示对于字符串模板（正如我怀疑 codepen 在加载 HTML 内容时所做的那样），使用闭合标签，而自关闭在单文件组件、JSX 和字符串模板中很好（在构建过程中处理的东西和组件名称更广为人知）。