时间戳

首页 > 解决方案 > Vue 只呈现第一个自定义组件问题

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

问题描述

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

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

标签： javascriptvue.js

解决方案

由于您在 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

推荐阅读