Vueコンポーネント化の基本的な使用方法の詳細

序文：

場合によっては、HTML 構造化コードのセットが存在し、それにイベントがバインドされることがあります。すると、このコードは複数の場所で使用される可能性があり、あちこちにコピーされると、イベント部分のコードを含め、多くのコードが繰り返されることになります。そして、この時点でこれらのコードをコンポーネントにカプセル化することができ、将来それを使用するときには、通常のhtml要素を使用するのと同じように使用できます。

1. コンポーネント化とは何ですか?

vue.jsには 2 つの魔法の武器があります。1 つはデータ駆動型、もう 1 つはコンポーネント化です。そこで疑問になるのは、コンポーネント化とは何であり、なぜコンポーネント化が必要なのかということです。次に、この 2 つの質問に 1 つずつお答えします。コンポーネント化とは、ページを複数のコンポーネントに分割し、各コンポーネントが依存するCSS 、 JS 、テンプレート、画像などのリソースをまとめて開発、保守することです。 コンポーネントはリソースに依存しないため、システム内で再利用でき、ネストできます。プロジェクトが複雑な場合、コードの量を大幅に簡素化でき、後からの変更やメンテナンスにもより適しています。

2. 基本的な使い方

<div id="アプリ">
  <ボタン カウンター></ボタン カウンター>
  <ボタン カウンター></ボタン カウンター>
  <ボタン カウンター></ボタン カウンター>
</div>
<スクリプト>
  // button-counterという新しいコンポーネントを定義します Vue.component('ButtonCounter', {
    データ: 関数 () {
      戻る {
        カウント: 0
      }
    },
    テンプレート: '<button @click="count++">{{ count }} 回クリックしました</button>'
  })
  constアプリ = 新しいVue({
    el: "#app",
    データ： {
      メッセージ: 「こんにちは」
    }
  })
</スクリプト>

上記では、ボタンがクリックされた回数を記録する機能を実装するbutton-counterというコンポーネントを作成しました。後から使用したい場合は、 button-counterを通じて使用できます。コンポーネントは再利用可能なVueインスタンスであるため、 data 、 computed 、 watch 、 methods 、 lifecycle hooks など、 new Vueと同じオプションを受け取ります。唯一の例外は、el のようなルートインスタンス固有のオプションです。

もう一つ注意すべき点は、コンポーネント内のdata関数である必要があるということです。

達成された結果を見てみましょう:

上記ではbutton-counterコンポーネントを 3 回使用したため、ページには 3 つのコンポーネントが表示され、各コンポーネントは独立してcountを維持します。これは、コンポーネントを使用するたびに新しいインスタンスが作成されるためです。各インスタンスは返されたオブジェクトの独立したコピーを保持できるため、 dataで関数を使用します。

Vue コンポーネント化の基本的な使い方についてはこれで終わりです。Vue コンポーネント化の使い方に関するより詳しい内容については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。