Question

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

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

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

该表单应该可以被许多其他用户重用，并且表单本身的内容应该是不相关的。它可能混合使用html /输入/自定义组件作为子项。

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

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>

因此：

MyForm传递一个模型进行提交，将其存储在数据中
MyTextInput是一个自定义组件，用于显示标签
第二个MyTextInput是相同的组件，但是在另一个名为“MyPanel”的组件中创建，因为此字段需要以不同的方式放置。

正如我们所看到的，传递变量和组合本身存在许多问题：

成分：

如果我在<slot></slot>的临时板中放置一个MyForm来显示字段，它将在父范围内编译，因此所有子节点（包括MyTextField）都无法访问“模型”< / LI>
如果我尝试使用<MyForm inline-template>，则无法自动显示表单页眉和页脚，因为所有内容都将被替换。此外，当使用单个文件组件时，编译器将查找inline-template内的所有组件，这意味着我必须将MyTextInput和MyPanel导入MyForm，这是不切实际的。我事先并不知道所有永远不会以我的形式结束的组件！

传递变量：

如果我直接使用“model”中的变量（在第一个TextInput中），我会收到警告我正在修改父项中的变量，并且它将在下一次渲染时被覆盖（但在这种情况下，它不会被覆盖，因为我是故意修改父母）
我无法先将模型传递给第二个MyTextInput而不将其传递给MyPanel。实际上我必须将它传递到中间的每个自定义组件。我事先并不知道有多少自定义组件。这意味着我将不得不修改将放入MyForm的每个组件的代码，并要求用户为它们包含的每个自定义组件传递数据。
如果我尝试正确通知家长有关更改，我需要将v-on：event添加到每个textinput及其间的每个自定义组件，以使事件达到MyForm。

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

我的想法是否可以使用Vue.js 2.0解决？我之前为AngularJS（1.5）设计了相同的组件，它工作正常，不需要为表单的每个子项添加修改。

Answer 1

我一直在使用基于vue 2.0的ui框架，你可能会从its implementation获得一些想法。基于它的实现和我的经验，我认为使用你的框架负责组装表单模型的人。此外，对于表单，我们总是可以通过使用字段来轻松获取要发送的所有数据。没有v-model帮助的Some text here #Foo Some other text here....道具。

The framework's doc on form element也可能有所帮助，但目前只提供中文版，但代码示例除外。

Answer 2

我建议您使用Form Input Components using Custom Events来传递表单中的变量。

现在认为局部变异是一种反模式，例如声明一个道具a，然后设置this.a = someOtherValue 零件。由于新的渲染机制，每当父组件重新渲染，子组件的本地更改将是覆盖。一般来说，在2.0中你应该将道具视为不可变的。变异道具的大多数使用案例都可以用数据代替财产或计算财产。

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

2 个答案: