Question

我有两种形式（添加表单和编辑表单）。我的两种形式中的所有字段完全相同（即两个模板都相同）。这些表格可以通过主页通过各自的按钮访问。如何重复单个vue模板添加表单以及编辑表单？

我在typescript

中编写基于类的组件

Answer 1

您可以创建一个名为customform的组件，然后声明将传递给组件的道具以指定它是什么类型（编辑表单，创建表单）然后在您需要编写的表单内你的逻辑，像这样：

<customForm :edit="true" :create="false" :data="data"></customForm>

然后在表单组件中：

<template>
  <form class="customform">
    <div class="row">
      <label>Email: </label><input type="text" value="{{data.email || ''}}">
    </div>
  </form>
</template>

<script>
export default {
  props: {
    edit: {
      type: Boolean,
      default: false
    },
    create: {
      type: Boolean,
      default: false
    },
    data: {}
  }
}
</script>

理念是能够使用道具渲染表单（例如，如果编辑为真，那么您将必须注入值并更改表单的操作，如果创建然后是值字段将为空，操作将不同......等等）

如何在vue 2中重复使用模板？

1 个答案: