Vue Js：重用表单组件进行添加/编辑操作

Question

假设Post，我想对实体进行添加和编辑操作。 add/edit 表单上有相同的字段。所以我想问一下我可以把表单做成一个单独的组件在add.vue和edit.vue中使用吗？这是在 VueJS 中做这种事情的最佳方式吗？

我问这个是因为我在互联网上访问过很多代码，其中作者没有遵循这种方法，他们正在为 add/edit.

制作单独的表格

Answer 1

当然可以对这两个操作使用相同的组件。 您只需要处理数据流（调用正确 api / graphql 变异 / 表单操作）

Answer 2

如果您的表单的大部分组件都不相同，请在 Form.vue 和 add.vue 中使用它 edit.vue 如果它可重复使用，请创建一个基础组件

确保控制数据correctly/state。

Answer 3

您应该使用一个组件，因为您不想重复代码。传递实体的 ID 至关重要。如果后端收到没有 ID 的实体，那么它就知道这是添加操作（在数据库中执行 INSERT）。如果设置了 ID，则后端知道它必须更新。