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://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

我分叉了代码笔，可以确认这与单独的结束标记样式一起工作，而不是对组件使用自动闭合标记。

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

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

自动关闭标签与（完全？）关闭标签is discussed in the vue style guide page（v2）相对应，它表示对于字符串模板（就像我怀疑Codepen在加载HTML内容时所做的那样），要使用关闭标签，而单文件组件，JSX和字符串模板中的自动关闭功能比较好（在构建和组件名称过程中进行处理的东西更为人所知）。