Vue JS-呈现多个组件实例

Vue JS - Rendering Multiple Instances of Components

本文关键字：组件实例 JS- Vue 更新时间：2023-09-26

开发环境：

首先，我使用的是Vue 1.0和Vueify 7.0.0，使用的是最新的节点。js、npm和browserfy在本地Apache服务器的Ubuntu机器上编译代码。

问题：

我为<form-input/>创建了一个自定义组件，它的渲染没有错误。然而，当试图将它们放在一起时，只有一个会渲染：

<form>
      <form-input />
      <form-input />
      <form-input />
</form>

为了让多个组件进行渲染，我必须将每个组件封装在自己的<div>中。

<form>
      <div><form-input /></div>
      <div><form-input /></div>
      <div><form-input /></div>
</form>

作为参考，<form-input />模板如下所示：

<template>
    <div class="input-group">
        <label"></label>
        <input name="" class="form-control" type="text">
    </div>
</template>

并不是说这是一个非常糟糕的问题，但如果没有额外的<div>标签，阅读起来会容易得多。

问题：

这种预期行为是因为每个组件都需要自己的dom元素来绑定，还是我缺少了什么？

仅供参考：

我也尝试过用一个额外的div标记来包装模板，但这没有帮助。我也没有得到任何编译或运行时错误，无论它写模板的方式。

提前谢谢。

我不确定这是否会导致问题，但Vue.js的创建者不建议使用自关闭标签：https://github.com/vuejs/vue/issues/1036.如果您将输入更改为<form-input></form-input>，您还会有问题吗？

我不知道这个建议如何与Vue 1.0配合使用，但与Vue 2.0配合使用效果很好：

<form>
   <form-input key="form-input-1" />
   <form-input key="form-input-2" />
   <form-input key="form-input-3" />
</form>