Vue 2에서 템플릿을 재사용하려면 어떻게 해야 합니까?

Vue 2에서 템플릿을 재사용하려면 어떻게 해야 합니까?

두 가지 양식(추가 및 편집)이 있습니다.두 양식의 모든 필드가 완전히 동일합니다(즉, 템플릿이 동일합니다).두 양식 모두 홈페이지에서 각각의 버튼을 통해 접근할 수 있습니다.단일 Vue 템플릿을 양식 추가 및 편집에 재사용하려면 어떻게 해야 합니까?

저는 TypeScript에 클래스 기반 컴포넌트를 쓰고 있습니다.

다음과 같은 컴포넌트를 생성할 수 있습니다.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>

이 아이디어는 소품을 사용하여 폼을 렌더링할 수 있도록 하는 것입니다(예를 들어 편집이 참일 경우 값을 삽입하고 폼의 액션을 변경해야 합니다.작성할 경우 필드의 값이 비어 있고 액션이 다릅니다).

언급URL : https://stackoverflow.com/questions/49126557/how-can-i-reuse-templates-in-vue-2