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

【问题标题】：Vue only renders first custom component issueVue 只呈现第一个自定义组件问题
【发布时间】：2020-01-09 12:04:09
【问题描述】：

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

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，因为我不能为这个特定项目使用构建系统，不确定这是否重要。

谁能指出我正确的方向？谢谢。

【问题讨论】：

标签： javascript vue.js

【解决方案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

【讨论】：

谢谢，这解决了问题！

【解决方案2】：

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

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

【讨论】：

你知道为什么会这样吗？我将 Vue 与 Laravel 一起使用，这是我设法解决此问题的唯一方法，这有点奇怪，因为我已经在每个组件中添加了一些 div 以查看它是否有效，但它并没有那样工作。

【解决方案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

自闭合标签与（完整？）闭合标签is discussed in the vue style guide page（v2），它表示对于字符串模板（正如我怀疑codepen在加载您的HTML内容时所做的那样），使用闭合标签，而自关闭在单文件组件、JSX 和字符串模板中很好（在构建过程中处理的东西和组件名称更广为人知）。

【讨论】：