vue で独自のコンポーネントをカプセル化する方法

Vue は、最新の構成可能なユーザー インターフェイスを構築するための人気のある JavaScript フレームワークです。 Vue の基礎はコンポーネント アーキテクチャです。コンポーネントは再利用可能なコード ブロックです。Vue フレームワークを使用すると、ページを複数のコンポーネントに簡単に分解できます。さらに、Vue を使用すると、開発者は特定のビジネス ニーズに合わせてカプセル化されたコンポーネントをカスタマイズすることもできます。この記事では、他の開発者やプロジェクトが広く使用できるように、独自のコンポーネントを Vue でカプセル化する方法を紹介します。

要件分析

コンポーネントをパッケージ化する前に、要件を分析する必要があります。この記事では、フォーム検証コンポーネントを例として説明します。要件は次のとおりです:

1. 携帯電話番号、電子メール アドレス、およびパスワードの形式が有効であることを検証します。
2. 検証結果にさまざまなスタイルを提供します。
3. エラー メッセージが表示されます。

これらの要件に基づいて、フォーム検証を実装するための Vue コンポーネントを作成する必要があります。

コンポーネントのカプセル化

次に、Vue でカスタム コンポーネントをカプセル化する方法を示します。

コンポーネントの作成

まず、コンポーネントを作成する必要があります。 Vue では、コンポーネントは Vue.component() 関数を使用して作成されます。この関数は、コンポーネントの名前とコンポーネントのオプション オブジェクトという 2 つのパラメータを取ります。以下は簡単な例です:

Vue.component('validation-form', {
  // 组件选项
})

この例では、validation-form という名前のコンポーネントを定義します。これは、Vue コンポーネントの機能を拡張するために使用されるオプション オブジェクトです。

テンプレート

次に、コンポーネントのテンプレートを定義する必要があります。テンプレートは、コンポーネントのコンテンツを表示する HTML コードのブロックです。コンポーネントのオプション オブジェクトでは、テンプレート オプションを使用してテンプレートを定義できます。簡単な例を次に示します。

Vue.component('validation-form', {
  template: '<div>表单验证组件</div>'
})

この例では、単純な HTML 要素 <div> のみを含むテンプレートを定義します。 <h3>プロパティ</h3> <p>次に、コンポーネントのプロパティを定義する必要があります。プロパティは、親コンポーネントから子コンポーネントへの受け渡しを可能にするデータのタイプです。コンポーネントのオプション オブジェクトでは、props オプションを通じてプロパティを定義できます。次に例を示します。 </p> <pre class="brush:php;toolbar:false">Vue.component('validation-form', {   props: [     'email',     'password',     'phone'   ],   template: `     &lt;div&gt;       &lt;div&gt;电子邮件地址：{{ email }}&lt;/div&gt;       &lt;div&gt;密码：{{ password }}&lt;/div&gt;       &lt;div&gt;电话：{{ phone }}&lt;/div&gt;     &lt;/div&gt;   ` })</pre> <p> この例では、<code>email、password、および phone の 3 つのプロパティを定義します。テンプレートでは、特別な構文の二重中括弧 {{ }} を使用して属性の値を参照します。

イベント

次に、コンポーネントのイベントを定義する必要があります。イベントは、コンポーネントによってトリガーされ、データを親コンポーネントに渡すアクションです。コンポーネントのオプション オブジェクトでは、$emit() 関数を通じてイベントを定義できます。以下に例を示します。

Vue.component('validation-form', {
  props: [
    'email',
    'password',
    'phone'
  ],
  template: `
    <div>
      <input>
      <input>
      <input>
    </div>
  `
})

この例では、v-model ディレクティブを使用してデータをフォーム要素にバインドします。フォーム要素の値が変更されるたびに、$emit() 関数を使用してカスタム イベントをトリガーし、イベント名にプレフィックス change- を使用して必要に応じてデータを渡します。

具体的な実装

上記の基本概念を理解すると、ニーズに応じてコンポーネントを実装できます。次の機能を備えたフォーム検証コンポーネントを実装します。

1. 電子メール アドレスと携帯電話番号の形式とパスワードの有効性を検証します。
2. さまざまなスタイルを提供し、検証結果に基づいてエラー メッセージを表示します。

まず、コンポーネントのテンプレートとプロパティを定義する必要があります。

Vue.component('validation-form', {
  props: [
    'email',
    'password',
    'phone'
  ],
  data() {
    return {
      // 绑定表单元素的值
      emailValue: this.email,
      passwordValue: this.password,
      phoneValue: this.phone,
      // 不同的样式，根据表单验证结果决定
      emailClass: '',
      passwordClass: '',
      phoneClass: '',
      // 错误信息
      emailError: '',
      passwordError: '',
      phoneError: ''
    }
  },
  methods: {
    // 验证电子邮件地址的函数
    validateEmail: function () {
      const regex = /^([\w\-\.]+)@([\w\-\.]+)\.(\w+)$/;
      if (regex.test(this.emailValue)) {
        this.emailClass = 'is-success';
        this.emailError = '';
      } else if (this.emailValue.length === 0) {
        this.emailClass = '';
        this.emailError = '';
      } else {
        this.emailClass = 'is-danger';
        this.emailError = '电子邮件地址格式错误!';
      }
    },
    // 验证密码的函数
    validatePassword: function () {
      const regex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;
      if (regex.test(this.passwordValue)) {
        this.passwordClass = 'is-success';
        this.passwordError = '';
      } else if (this.passwordValue.length === 0) {
        this.passwordClass = '';
        this.passwordError = '';
      } else {
        this.passwordClass = 'is-danger';
        this.passwordError = '密码至少8个字符，包括字母和数字!';
      }
    },
    // 验证手机号码的函数
    validatePhone: function () {
      const regex = /^1[3456789]\d{9}$/;
      if (regex.test(this.phoneValue)) {
        this.phoneClass = 'is-success';
        this.phoneError = '';
      } else if (this.phoneValue.length === 0) {
        this.phoneClass = '';
        this.phoneError = '';
      } else {
        this.phoneClass = 'is-danger';
        this.phoneError = '手机号格式错误!';
      }
    }
  },
  template: `
    <div>
      <div>
        <label>电子邮件地址</label>
        <div>
          <input>
        </div>
        <p>{{ emailError }}</p>
      </div>

      <div>
        <label>密码</label>
        <div>
          <input>
        </div>
        <p>{{ passwordError }}</p>
      </div>

      <div>
        <label>手机号码</label>
        <div>
          <input>
        </div>
        <p>{{ phoneError }}</p>
      </div>
    </div>
  `
})

上記のコードでは、email# という 3 つのプロパティを持つコンポーネントを定義します。 ##、password、phone、これらの属性は V-model によってそれぞれのフォーム要素にバインドされます。コンポーネントのオプション オブジェクトで、次のプロパティを定義します:

1. emailValue、passwordValue、phoneValue: 値のバインドに使用されます。フォーム要素の。
2. emailClass、passwordClass、phoneClass: フォーム検証結果に基づいて決定される、さまざまなスタイルをバインドするために使用されます。
3. emailError、passwordError、phoneError: エラー メッセージのバインディングを提供するために使用されます。

また、電子メール アドレス、パスワード、携帯電話番号の有効性を検証し、検証結果に基づいてさまざまなスタイルとエラー メッセージを設定する 3 つのユーザー定義関数も定義しました。

テンプレートでは、V-model ディレクティブを使用してデータをフォーム要素にバインドし、:class 属性を使用して、必要に応じてフォーム要素をさまざまなスタイルにバインドします。 form 要素の値が変更されるたびに、@blur イベントを使用してユーザーを認証するカスタム イベントをトリガーし、データとイベント名を渡します。

コンポーネントの使用

独自の Vue コンポーネントを正常にカプセル化したので、それを他の Vue アプリケーションで使用できるようになります。このコンポーネントを呼び出す方法は? Vue アプリケーションで

タグを使用してコンポーネントをレンダリングし、必要なプロパティをコンポーネントに渡すだけです。

<validation-form></validation-form>

上記のコードでは、コンポーネントにバインドされているプロパティをコンポーネントに渡しています。以下の図に示すように、ビューには入力ボックスとそのステータス、およびエラー メッセージが表示されます。

結論

Vue は、使いやすく、柔軟で強力な JavaScript フレームワークであり、さまざまな種類のアプリケーションやコンポーネントの構築に適しています。カスタム コンポーネントは、開発者がコードをより適切に整理して再利用するのに役立ち、コードの保守性と拡張性を向上させるのに役立ちます。この記事では、Vue でカスタム コンポーネントを作成する方法と、コンポーネント内でプロパティ、イベント、スタイルなどの基本概念を使用する方法を学びました。また、インスタンス コンポーネントのフォーム検証を使用して、完全な Vue コンポーネントを実装する方法を示します。この記事が役に立ち、Vue コンポーネントの特性と使用法をより深く理解し、Web アプリケーションの構築に Vue コンポーネントをより適切に使用できるようになることを願っています。