如何在 VueJS 2 中使用相同的用户表单组件来创建和编辑用户？答案

【问题标题】：How to use same User form component in VueJS 2 for both create and edit User?如何在 VueJS 2 中使用相同的用户表单组件来创建和编辑用户？
【发布时间】：2019-01-25 19:56:48
【问题描述】：

目前我有单独的组件CreateUser.vue 和EditUser.vue，它们的形式非常大。

CreateUser 的路由是 /users
EditUser 的路由是 /users/:username。

后端 API 也不同：

POST 用于创建 (example.com/users) 和
PUT 进行编辑 (example.com//users/:username)。

同样在EditUser，username 字段是只读，因为它一旦创建就无法编辑，否则CreateUser 和EditUser 模板是相同的，但 Javascript 部分不同。

问题：

我怎样才能将其组合成一个组件 UserForm.vue 并消除 CreateUser.vue 和 EditUser.vue ？

在主 UI 中有一个按钮 Create User，它路由到 CreateUser 组件。在用户视图列表中，每一行都有一个按钮Edit，该按钮路由到EditUser 组件。

我正在使用 Vue 路由器来定义类似于以下的路由：

{
   path: '/users',
   name: 'createUser',
   component: CreateUser
},
{
   path: '/users/:id',
   component: EditUser,
   name: 'editUser'
}

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

您可以通过路由器配置中的props 属性将pass parameters 插入到您的组件中，然后按照上述to render the necessary inputs... 的答案使用它

{
  path: '/users',
  name: 'createUser',
  component: UserForm
  props: {editMode: false}
},
{
  path: '/users/:id',
  name: 'editUser'
  component: UserForm,
  props: {editMode: true}
}

【讨论】：

如果映射到 createUser 上，如何使用 '/users 加载用户列表？

【解决方案2】：

只需在您的 UserForm.vue

上添加一个属性

props: {
    currentAction : {
        type : String,
        default: 'create',
        required: true
    },
},

您必须在

处传递此字符串

<user-form :currentAction="create"></user-form>

并在您的组件中使用它来调用必要的方法 createUser() 或 updateUser()。还可以使用它来呈现必要的输入和/或计算必要的计算属性。

据我所知，此属性必须是您的 主 UI 上的数据属性，您必须在显示用户表单之前更改此属性。

【讨论】：