vuejs2 - 如何在 Vue 2 中重用模板？

Question

我有两种形式(添加和编辑)。两种表格中的所有字段都完全相同(即模板相同)。这两种形式都可以通过各自的按钮从主页访问。如何为添加表单和编辑表单重复使用单个 Vue 模板？

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

Answer 1

您可以创建一个名为 customform 或其他名称的组件，然后声明将传递给该组件的 Prop 以指定它是什么类型(编辑表单，创建表单)，然后在表单中您将需要写你的逻辑，像这样:

<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 为真，则您将必须注入(inject)值并更改表单的操作，如果创建则为字段将为空，操作将有所不同...等)