Question

开发环境：

首先，我使用最新的node.js，npm和browserify在Vue 1.0和Vueify 7.0.0上使用本地Apache服务器在Ubuntu机器上编译代码。

问题：

我为<form-input/>创建了一个自定义组件，可以无错误地渲染。但是，当尝试将它们放在一起时，只有一个会呈现：

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

为了获得要渲染的多个组件，我必须将每个组件包装在其中{@ 1}}。

<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>标签，它就会更容易阅读。

问题：

这是预期的行为，因为每个组件都需要它自己的dom元素来绑定或者我错过了什么？

仅供参考：

我还尝试使用额外的div标签包装模板，但这并没有帮助。在编写模板时，我也没有得到任何编译或运行时错误。

提前致谢。

Answer 1

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

，是否还有问题？

Answer 2

我不知道此建议如何与Vue 1.0一起使用，但与Vue 2.0一起使用时效果很好：

您只需要为每个组件添加 key 属性，即可告诉Vue将这些自定义组件呈现为单独的组件。

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

Vue JS - 渲染组件的多个实例

2 个答案: