単一ファイル コンポーネントを使用して Vue でコンポーネントのモジュール化を実装するためのヒントとベスト プラクティス

Vue は、シングルページ アプリケーションや動的な Web サイトの開発に広く使用されている人気のある JavaScript フレームワークです。その中でも、コンポーネント化とモジュール化はその主要な機能の 1 つです。 Vue は、シングル ファイル コンポーネント (SFC) を通じてコン​​ポーネントのモジュール化を実装し、コンポーネントの作成、保守、テストの効率を向上させます。

この記事では、単一ファイル コンポーネントを使用して Vue コンポーネントのモジュール化を実装するための手法とベスト プラクティスを紹介します。

単一ファイル コンポーネントとは何ですか?

単一ファイル コンポーネントは、完全な Vue コンポーネントを含む .vue 接尾辞が付いたファイルを指します。 SFC ファイルには通常、テンプレート コード、スクリプト コード、スタイル コードの 3 つの部分が含まれています。以下は、単純なコンポーネントの例です。

<template>
  <div>
    <h1 id="title">{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {
    title: String,
    content: String
  }
}
</script>

<style scoped>
h1 {
  font-size: 20px;
  color: red;
}
p {
  font-size: 16px;
  color: blue;
}
</style>

上の例では、template タグにはテンプレート コードが含まれ、script タグはコンポーネントの名前と props 属性を含むコンポーネントの定義を定義します。 styleタグはスタイルコードを定義します。このうち、scoped キーワードは、このスタイル コードが現在のコンポーネント内でのみ機能することを意味します。

単一ファイル コンポーネントを使用すると、完全なコンポーネントを 1 つのファイルにカプセル化できるため、コンポーネントの作成と保守が容易になります。コンポーネントを使用する場合は、対応するコンポーネントをインポートするだけで済みます。

単一ファイル コンポーネントを使用するにはどうすればよいですか?

Vue プロジェクトで単一ファイル コンポーネントを使用するには、ビルド ツール (Webpack など) を使用してコンパイルする必要があります。コンパイルされたコードはブラウザで直接実行できます。単一ファイル コンポーネントを使用する前に、Vue スキャフォールディングをインストールする必要があります。

1. Vue スキャフォールディングのインストール

npm install -g vue-cli

2. 新しい Vue プロジェクトの作成

vue init webpack my-project

3. プロジェクト ディレクトリに入り、依存関係をインストールします

cd my-project
npm install

4. 新しい単一ファイル コンポーネントの作成

src/components ディレクトリに新しい .vue ファイルを作成します。例:

<template>
  <div class="hello">
    <h1 id="greeting">{{ greeting }}</h1>
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    greeting: {
      type: String,
      default: 'Hello'
    },
    items: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style scoped>
h1 {
  font-size: 32px;
  color: red;
}
ul li {
  font-size: 16px;
  color: blue;
}
</style>

5. このコンポーネントを他のコンポーネントで参照する

このコンポーネントを他のコンポーネントで使用する場合は、最初にこのコンポーネントをインポートする必要があります:

import HelloWorld from '@/components/HelloWorld.vue'

次に、このコンポーネントをコンポーネントで使用します：

<template>
  <div>
    <HelloWorld :greeting="greeting" :items="list" />
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'AnotherComponent',
  components: {
    HelloWorld
  },
  data() {
    return {
      greeting: 'Bonjour',
      list: ['Apple', 'Banana', 'Orange']
    }
  }
}
</script>

<style scoped>
/* 样式代码 */
</style>

一般に、単一ファイルのコンポーネントを使用してコンポーネントをモジュール化するのは非常に簡単で、上記のようにコンポーネントを定義し、コンポーネントを使用する必要がある場所にインポートするだけです。もちろん、他にもいくつかの使用法やテクニックがあります。それについては、以下でさらに紹介します。

単一ファイル コンポーネントのベスト プラクティス

コンポーネント名の命名規則

コンポーネント名は、MyComponent のように大文字で始め、キャメル ケースで名前を付ける必要があります。この命名方法は Vue の公式仕様により準拠しており、HTML タグと区別しやすくなっています。

テンプレート コードの記述

テンプレート コードを記述するときは、次の規則に従う必要があります。

• テンプレート コードには、データ レンダリングに関連するコードのみを含める必要があります。テンプレート コードに複雑なビジネス ロジックを記述する;
• テンプレート コードが複雑すぎる場合は、コードを別個のコンポーネントに分割してコードの再利用性を向上させることを検討できます;
• テンプレート コード内の場合は、{{ message }}、v-for および v-if 命令などの Vue のデータ バインディング構文に従う必要があります。
• テンプレート コード内で JavaScript 式や関数呼び出しを使用することは避けてください。これらは使用できます。コンポーネントの script タグに追加します。

スクリプト コードの記述

スクリプト タグを記述するときは、次の規則に従う必要があります。

• スクリプト タグでコンポーネントを定義するときは、次のルールを明確にする必要があります。型エラーや潜在的な問題を回避するには、コンポーネントの props 属性を使用します;
• コンポーネント内では、作成された関数、マウントされた関数、その他の関数などの Vue のライフサイクル フック関数に従う必要があります。デフォルトでは、これらの関数のこの関数は次を指します。現在のコンポーネントのインスタンス;
• コンポーネント内では、関数内の this ポインタが変更されるため、属性でのアロー関数または関数呼び出しの使用は避けてください。;
• コンポーネント内、直接変更は避けるべきです props 属性は、.sync 修飾子または $emit メソッドを通じて双方向のデータ バインディングを実現できます;
• コンポーネント内では、Vuex 状態の直接変更は避け、実現する必要があります突然変異と行動を通じて。

スタイル コードの記述

スタイル コードを記述するときは、次の点に従う必要があります。

• スタイル タグでスタイルを定義するときは、スタイルが現在のコンポーネント内でのみ機能するようにするには、スコープ付きキーワードを使用する必要があります。
• スタイルを記述するときは、スタイルの競合を避けるために、適切な CSS クラス名とネストされたセレクターの使用に注意する必要があります。
• #スタイルを記述するときは、スタイル コードの再利用性を向上させるために、変数やミックスインなどのツールをできる限り使用する必要があります。
• スタイルを記述するときは、対応するデザイン ガイドラインと標準に従って、スタイルの一貫性。

コンポーネントの再利用と拡張

頻繁に使用される一部のコンポーネントについては、コードの再利用性を向上させるために、できる限り基本コンポーネントにカプセル化する必要があります。たとえば、ボタン コンポーネントを基本コンポーネントにカプセル化し、それを他のコンポーネントで再利用および拡張できます。コンポーネントを拡張または変更する必要がある場合は、Vue のミックスインまたは継承メカニズムを使用してそれを実現できます。

概要

単一ファイル コンポーネントは Vue の非常に重要な機能です。単一ファイル コンポーネントを使用すると、完全なコンポーネントを 1 つのファイルにカプセル化できるため、コンポーネントの作成とメンテナンスが容易になります。単一ファイルのコンポーネントを使用する場合、コンポーネントの効率を向上させるために、コンポーネントの名前付け、テンプレート コードの記述、スクリプト コードの記述、スタイル コードの記述、コンポーネントの再利用と拡張など、対応する仕様とベスト プラクティスに従う必要があります。品質。

以上が単一ファイル コンポーネントを使用して Vue でコンポーネントのモジュール化を実装するためのヒントとベスト プラクティスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。