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

Question

我有两个表单（添加和编辑）。这两个表单中的所有字段都完全相同（即模板相同）。这两个表单可以通过主页上各自的按钮访问。如何重用一个Vue模板来实现添加表单和编辑表单？

我正在使用TypeScript编写基于类的组件。

- Veer3383

Answer 1

您可以创建一个名为customform的组件，然后声明传递到组件中的props来指定它是什么类型（编辑表单、创建表单），然后在表单内部需要编写您的逻辑，例如：

<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>

这个想法是使用props来渲染表单（例如，如果edit为true，则必须注入值并更改表单的操作，如果是create，则字段的值将为空，操作也会不同...等等）。

- Sletheren