uniapp グローバル パブリック コンポーネントの保存場所と使用法について話しましょう

フロントエンド開発に uniapp を使用するプロセスでは、多くの場合、カスタム ナビゲーション バー、ボトム ナビゲーション バー、ポップアップ ウィンドウなどのパブリック コンポーネントを使用する必要があります。では、これらのグローバルパブリックコンポーネントはどこに配置すべきでしょうか?この記事では、uniapp グローバル パブリック コンポーネントの保存場所と使用方法を紹介します。

1. uniapp グローバル パブリック コンポーネントの保存場所

uniapp では、パブリック コンポーネントを作成することで、異なるページで同じコンポーネントを再利用するという目的を達成できます。これらのコンポーネントは、グローバル パブリック コンポーネントとローカル パブリック コンポーネントに分類できます。

グローバル パブリック コンポーネントとは、カスタム ナビゲーション バー、ボトム ナビゲーション バー、ポップアップ ウィンドウなど、プロジェクト全体で使用できるコンポーネントを指します。ローカルパブリックコンポーネントとは、単一ページ内でのみ使用されるコンポーネントを指します。

それでは、グローバル パブリック コンポーネントをどこに配置する必要があるのでしょうか? uniapp のパブリック コンポーネントは、次の 2 つの場所に保存できます。

1. /components/ directory

uniapp プロジェクトのルート ディレクトリに、次の 2 つの場所にファイルがあります。コンポーネント フォルダー。このフォルダーはグローバル パブリック コンポーネントが配置される場所です。このフォルダーの下に複数のサブフォルダーを作成でき、各サブフォルダーには共通のコンポーネントが保存されます。このアプローチにより、プロジェクト全体がグローバル パブリック コンポーネントにアクセスできるようになります。

2. /pages/ ディレクトリ

グローバル パブリック コンポーネントは、/pages/ ディレクトリに配置することもできます。このメソッドはコンポーネントをページとして扱い、他のページからそのページを参照してコンポーネントを使用します。

2. uniapp グローバル パブリック コンポーネントの使用方法

グローバル パブリック コンポーネントの場所を保存すると、これらのコンポーネントを任意のページで使用できるようになります。

グローバル コンポーネントを使用するには 2 つの方法があります。

1. Vue.use() メソッドを使用してグローバルに登録します。

Vue.use( ) メソッドを使用すると、任意の vue コンポーネントにグローバル パブリック コンポーネントを登録できます。

たとえば、main.js では次のように登録できます:

import BackTop from '@/components/BackTop.vue'
Vue.use(BackTop)

その後、任意のページで次のようにコンポーネントを使用できます:

<template>
  <div>
    <back-top></back-top>
  </div>
</template>

2. 直接参照ページ内

#ページのコンポーネントでグローバル パブリック コンポーネントを直接参照することもできます。

たとえば、MyDialog という名前のグローバル パブリック コンポーネントを使用したい場合、ページ内で次のインポートを行う必要があります:

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

次に、ページのコンポーネント内で次のようにします。通常のコンポーネントと同様に、グローバル パブリック コンポーネントを使用します。

<template>
  <div>
    <my-dialog></my-dialog>
  </div>
</template>

このメソッドを使用する場合、コンポーネントを使用する必要があるすべてのページでそれを参照する必要があることに注意してください。

概要

uniapp には、グローバル パブリック コンポーネントの保存場所が 2 つあります: /components/ ディレクトリと /pages/ ディレクトリです。このうち、/components/ ディレクトリは共通の保存場所であり、コンポーネントのグローバル呼び出しを容易にします。 /pages/ディレクトリ内ではコンポーネントはページとみなされ、そのページを参照することで他のページでコンポーネントが利用されます。

どのストレージ メソッドが使用されるかに関係なく、Vue.use() メソッドを通じて、またはコンポーネント内で直接参照することによって、グローバル パブリック コンポーネントを使用できます。グローバル パブリック コンポーネントを使用すると、コードの再利用率が大幅に向上し、開発中にタスクをより効率的かつ迅速に完了できるようになります。

以上がuniapp グローバル パブリック コンポーネントの保存場所と使用法について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。