VUE3 開発の概要: コンポーネントを使用した動的読み込みと登録

VUE3 は現在最も人気のあるフロントエンド フレームワークの 1 つであり、その使いやすさ、柔軟性、パフォーマンスの最適化などの利点により、ますます多くの開発者を魅了しています。 VUE3 ではコンポーネントを使用することは非常に一般的な操作ですが、大規模なプロジェクトではコンポーネントの動的読み込みと登録が必要になる場合があるため、この記事ではコンポーネントを使用して動的に読み込みと登録を行う方法を紹介します。

まず、コンポーネントがどのように VUE3 に登録されるかを理解する必要があります。 VUE3 では、オブジェクト リテラルまたは Vue.createApp メソッドを使用してコンポーネントを登録できます。以下は、カスタム コンポーネントの簡単な例です。

<template>
  <div>{{ message }}</div>
</template>

<script>
  export default {
    props: {
      message: {
        type: String,
        required: true
      }
    }
  }
</script>

このコンポーネントは、「message」という名前のプロパティを受け取ります。このプロパティは文字列型でなければなりません。それ以外の場合は、エラーが報告されます。次に、コンポーネントを動的にロードして登録する方法を見てみましょう。

コンポーネントの動的ロード

コンポーネントの動的ロードとは、アプリケーションを実行するときに、コンポーネントが本当に必要な場合にのみ動的にロードされることを意味します。そうすることで、アプリケーションのパフォーマンスと応答性が向上します。

VUE3 には非同期コンポーネントの機能があり、コンポーネントを非同期コンポーネントとして定義し、必要に応じて読み込むことができます。以下は非同期コンポーネントの例です:

<template>
  <div>{{ message }}</div>
</template>

<script>
  export default {
    props: {
      message: {
        type: String,
        required: true
      }
    }
  }
</script>

非同期コンポーネントを使用する場合、コンポーネントを非同期関数として定義する必要があります。この関数では、import() を使用してコンポーネントを非同期にロードし、ロードが完了した後にコンポーネントを返すことができます。

以下は、より完全な非同期コンポーネントの登録例です:

<template>
  <div>
    <h1>Welcome to my app!</h1>
    <async-component :message="message" />
  </div>
</template>

<script>
  const AsyncComponent = () => ({
    // 加载异步组件
    component: import('./AsyncComponent.vue'),
    // 显示加载中
    loading: LoadingComponent,
    // 显示加载错误
    error: ErrorComponent,
    // 展示组件
    delay: 200,
    // 如果组件定义了名字，则可以直接使用这个字面量
    // name: 'my-component-name'
  })

  export default {
    components: {
      AsyncComponent
    },
    data() {
      return {
        message: 'Hello, world!'
      }
    }
  }
</script>

この例では、Vue 非同期コンポーネントの動的読み込みメソッドを使用し、最初に非同期コンポーネントを定義してから、それを使用します。テンプレートでレンダリングします。 AsyncComponent は単なる関数であるため、コンポーネントの初期化時にコンポーネントをロードする必要はなく、必要に応じて自動的にロードされます。

AsyncComponent を定義する場合、コンポーネントの非同期読み込みのために、コンポーネントのコンポーネント属性として戻り値が Promise である関数を指定できます。コンポーネントにプリロードされたコンポーネントが必要な場合は、loading および error オプションを使用してこれらのコンポーネントの名前を指定できます。コンポーネントが正常に読み込まれた後、遅延オプションを使用して、実際のコンポーネントがレンダリングされるまでの遅延を指定できます。

コンポーネントの登録

VUE3 では、グローバル登録またはローカル登録を使用してコンポーネントを登録できます。 2 つの違いは、コンポーネントがグローバルとして登録されるか、そのコンポーネントの親に限定されるかどうかです。

グローバル登録を使用すると、アプリケーション全体でコンポーネントを使用できますが、ローカル登録は親コンポーネントと子コンポーネントの間でのみ使用できます。グローバルに登録されたコンポーネントとローカルに登録されたコンポーネントの例を次に示します:

グローバル登録コンポーネント

コンポーネントをグローバルに登録する方法は、コンポーネントを Vue オブジェクトのコンポーネント オプションにマウントすることです。以下はグローバル登録です。 コンポーネントの例:

<template>
  <div>
    <my-component :message="message" />
  </div>
</template>

<script>
  import MyComponent from './MyComponent.vue'

  export default {
    components: {
      MyComponent
    },
    data() {
      return {
        message: 'Hello, world!'
      }
    }
  }
</script>

この例では、MyComponent コンポーネントをインポートし、Vue インスタンスのコンポーネント オプションに配置し、テンプレートで my-component を使用して表示します。 。

ローカル登録コンポーネント

ローカル登録コンポーネントは、現在のコンポーネントとそのサブコンポーネントでのみ使用できます。以下は、ローカル コンポーネントの登録の例です。

<template>
  <div>
    <my-component :message="message" />
  </div>
</template>

<script>
  import MyComponent from './MyComponent.vue'

  export default {
    components: {
      'my-component': MyComponent
    },
    data() {
      return {
        message: 'Hello, world!'
      }
    }
  }
</script>

この例では、MyComponent を現在のコンポーネントのローカル コンポーネントとして登録します。コンポーネント プロパティでコンポーネント名を「my-component」に設定し、コンポーネント インスタンスを値として渡します。

概要

この記事では、VUE3 のコンポーネントを使用してコンポーネントを動的に読み込み、登録する方法を学びました。これは、非同期コンポーネントと、グローバル コンポーネントとローカル コンポーネントの登録を使用して実現します。これらのテクノロジーを通じて、VUE3 のパフォーマンスと柔軟性を向上させることができます。

以上がVUE3 開発の概要: コンポーネントを使用した動的読み込みと登録の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。