Question

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

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

后端API也不同：

发布以创建（example.com/users）和
输入要编辑的内容（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'
}

Answer 1

您可以通过路由器配置中的props属性https://gist.github.com/benmarwick/f3e0cafe668f3d6ff6e5进入您的组件，然后按to render the necessary inputs...上面的答案使用它

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

Answer 2

只需在您的 UserForm.vue

上添加一个属性

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

您必须在

处传递此字符串

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

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

根据我的观察，该属性必须是主界面上的数据属性，在显示用户表单之前，您必须更改此属性。

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

2 个答案: