Vueに容易に再利用可能なフォームを作る方法

オリジナルのポストは私のWeb devのブログで公開され、hereを読むことができます.オリジナルのポストとこれとの違いは、ブログ上でCodeDandbox環境が動作していることです.
Webアプリケーションは、最近、多くのフォームを含んでいます.何度も、何かをすることができます:ユーザー、プロジェクト、ToDo項目、製品などです.通常、リソースの作成と編集は2つの別々のページで実装されます.コードを乾燥してコード繰り返しを避けるために、両方のシナリオに対して同じフォームコンポーネントを再利用しようとする必要があります.幸いにも、Vueを使用すると、再利用可能なフォームコンポーネントを簡単に実装できます.それでは始めましょう.
再利用可能なフォームコンポーネントを作成しましょう
ユーザーを作成または編集する簡単なフォームを作成します.単純さのために、我々は2つのフィールドだけを持ちます:電子メールと名前.これ以上のADOがなければ、再利用可能なフォームは最終的にどのように見えるでしょう.

<template>
  <form @submit.prevent="$emit('on-submit', form)">
    <div class="form-group">
      <label for="email">Email</label>
      <input type="email" name="email" v-model="form.email" />
    </div>
​
    <div class="form-group">
      <label for="name">Name</label>
      <input type="text" name="name" v-model="form.name" />
    </div>
​
    <button type="submit">Submit</button>
  </form>
</template>
​
<script>
export default {
  props: {
    user: {
      type: Object,
    },
  },
  data() {
    return {
      form: {
        email: this.user?.email || "",
        name: this.user?.name || "",
      },
    };
  },
};
</script>

UserFormコンポーネントはオプションのユーザープロップを持ち、2つの入力を含みます.各入力には、データ入力フォームへのバインドがあります.電子メールとフォーム.名前.フォーム提出については、フォームのオブジェクトをイベントペイロードとしてSubmitイベントのカスタムを発行します.ユーザプロップはオブジェクトであり、渡されるならば、それはメールと名前入力のために値を得るのに用いられます.propが渡されない場合、入力は空の文字列にデフォルトで行われます.

再利用可能なフォームの使い方
アプリでマウントされ、また、ユーザーフォームコンポーネントを使用するルートVueのアプリケーションコンポーネントを作成してみましょう.このコンポーネントはユーザーフォームをインポートし、2回レンダリングします.最初に作成ユーザーシナリオを表示し、2回目の更新ユーザーシナリオを表示します.

<template>
  <div id="app">
    <h3>Create user form</h3>
    <UserForm @on-submit="createUser" />
​
    <h3>Edit User form</h3>
    <UserForm :user="user" @on-submit="updateUser" />
  </div>
</template>
​
<script>
import UserForm from "./components/UserForm";
​
export default {
  name: "App",
  components: { UserForm },
  data() {
    return {
      user: {
        email: "[email protected]",
        name: "John",
      },
    };
  },
  methods: {
    createUser(userForm) {
      console.log("creating", userForm);
​
      // call an API to create a new user
    },
    updateUser(userForm) {
      console.log("updating", userForm);
​
      // call an API to update the existing user
    },
  },
};
</script>

​
アプリケーションコンポーネントには、データの一部としてユーザーオブジェクト(電子メールと名前を含む)があります.私たちは、このユーザーをショーケース更新ユーザーシナリオに使用します.アプリケーションには、CreateとUpdateフォームのSubmitイベントのカスタムのハンドラーである2つのメソッドがあります.ハンドラは1つのパラメータを持ち、それはメールと名前を含むuserformオブジェクトです.UserFormコンポーネントを使用するのは初めて、ユーザープロップを渡しません.OnSubmitイベントのハンドラーのみです.これはフォームの作成モードです.番目の例では、ユーザーオブジェクトをプロップとして渡します.これは、フォームコンポーネントをエディットモードで使用することを意味します.今回、フォームはメールと名前入力の値でプリフィルされます.

再利用可能なフォームは保全性とコード再利用を改善する
フォームに同じコンポーネントを再利用する利点は、より良いコード保全性とコード再利用です.単にフォームの実装やリファクタリングを行うときにコードを少なく書きます.より大きな形で、それは多分複雑さをわずかに増加させるでしょう、しかし、利点はそれからさらにより大きいです.