Vue.js 2.0-创建可重用的组件

Question

我正在尝试使用Vue.js 2和单个文件组件创建完全可重用的组件，而现在我的方法似乎无法实现。

目标是创建用于为复杂的嵌套JSON结构创建表单的组件。 该结构应该被编辑然后发送到服务器。 组件本身会显示标题和提交按钮，但是字段及其放置位置完全由我的组件用户负责。 （前端工程师）

MyForm组件（此处与实现无关）传递了JSON数据和url，以将其发布到。

该表单应该可以被许多其他用户重用，并且表单本身的内容应该是不相关的。 它可能混合了html / inputs / custom组件作为子组件。

让我们想象一个简单的场景，其中没有数据嵌套以下数据：

var mymodel={ name : "My name", surname : "My surname" }

我想使用组件创建一个表单：

<MyForm :model="mymodel" :url="http://localhost/post">
   <div>
     <MyTextInput v-model="model.name" label="Name"/>
     <MyPanel>
       <MyTextInput v-model="model.surname" label="Surname"/>
     </MyPanel>
   </div>
</MyForm>

因此：

1. MyForm传递了一个模型进行提交，并将其存储在数据中
2. MyTextInput是一个自定义组件，用于显示带有标签的输入
3. 第二个MyTextInput是相同的组件，但是在另一个包含“ MyPanel”的组件中创建，因为此字段需要放置不同。

如我们所见，传递变量和组合本身存在很多问题：

组成：

1. 如果我在MyForm的模板中放置一个<slot></slot>来显示字段，它将在父范围内进行编译，因此所有子级（包括MyTextField）都无法访问“模型”
2. 如果我尝试使用<MyForm inline-template> ，则由于所有内容均已替换，因此无法自动显示表单页眉和页脚。 另外，当使用单个文件组件时，编译器将在inline-template查找所有组件，这意味着我将不得不将MyTextInput和MyPanel导入MyForm ，这是不实际的。 我事先不知道永远不会以我的形式出现的所有组件！

传递变量：

1. 如果我直接使用“模型”中的变量（在第一个TextInput中），我会收到警告，我正在从父级修改变量，并且在下一次渲染时它将被覆盖（但是在这种情况下，由于我正在故意修改变量，因此不会被覆盖）父母）
2. 如果不MyTextInput模型传递给MyPanel就无法将模型传递给第二个MyTextInput 。 实际上，我将不得不将其传递给介于两者之间的每个自定义组件。 而且我事先也不知道会有多少个自定义组件。 这意味着我将不得不修改将要放入MyForm的每个组件的代码，并要求用户传递其包括的每个自定义组件的数据。
3. 如果我想适当地通知父母有关更改的信息，则需要在每个textinput和之间的每个自定义组件中添加v-on：事件，以使事件到达MyForm 。

正如我所说的，该组件应该简单易用。 要求该组件的用户修改他们放入的每个子代的代码，并要求他们在内部的每个组件上添加v-on：似乎不切实际。

使用Vue.js 2.0是否可以解决我的想法？ 我之前为AngularJS（1.5）设计了相同的组件，并且运行良好，不需要对表单的每个子项进行修改。

Answer 1

我一直在使用基于vue 2.0的ui框架，您可能会从其实现中获得一些想法。 基于它的实现和我很少的经验，我认为是由您的框架负责组装表单模型的人。 同样，对于表单，我们总是可以在不使用v-model的帮助下，通过使用字段的value属性轻松获得要发送的所有数据。

该框架的有关表单元素的文档也可能会有所帮助，但除代码示例外，目前仅提供中文版本。

Answer 2

我建议您使用带有自定义事件的表单输入组件来在表单中传递变量。

现在将局部更改prop视为反模式，例如，声明prop a然后设置this.a =组件中的someOtherValue。 由于采用了新的渲染机制，每当父组件重新渲染时，子组件的本地更改都将被覆盖。 通常，在2.0中，您应该将道具视为不可变的。 改变道具的大多数用例可以用数据属性或计算属性代替。