1

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

传递变量：

  1. 如果我直接使用“模型”中的变量（在第一个 TextInput 中），我会收到警告说我正在修改来自父级的变量，它将在下一次渲染时被覆盖（但在这种情况下，它不会被覆盖，因为我有意修改父母）
  2. 如果不将模型传递给第一，我就无法将模型MyTextInput传递给MyPanel第二。实际上，我必须将它传递给介于两者之间的每个自定义组件。而且我事先不知道会有多少自定义组件。这意味着我将不得不修改将要放入的每个组件的代码，MyForm并要求用户为他们包含的每个自定义组件传递数据。
  3. 如果我要尝试正确通知父母有关更改，我需要将 v-on: 事件添加到每个文本输入和介于两者之间的每个自定义组件，以便事件到达MyForm。

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

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

4

2 回答 2

1

我一直在使用基于 vue 2.0 的 ui 框架，您可能会从它的实现中得到一些想法。基于它的实现和我对它的一点经验，我认为是使用你的框架的责任来组装表单模型的人。value另外，对于一个表单，我们总是可以很容易地通过使用字段的props来获取所有要发送的数据，而无需v-model' 的帮助。

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

于 2016-10-28T16:53:36.230 回答
0

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

在本地改变一个 prop 现在被认为是一种反模式，例如声明一个 prop a 然后在组件中设置 this.a = someOtherValue。由于新的渲染机制，每当父组件重新渲染时，子组件的本地更改都会被覆盖。一般来说，在 2.0 中，您应该将 props 视为不可变的。大多数改变 prop 的用例可以用数据属性或计算属性替换。

于 2016-10-27T16:21:09.410 回答