VUE3 開発の基本: Vue.js カスタムプラグインを使用した開発-Vue.js-php.cn

VUE3 開発の基本: Vue.js カスタムプラグインを使用した開発

WBOY

リリース： 2023-06-15 20:48:12

オリジナル

2692 人が閲覧しました

Vue.js がフロントエンド開発に推奨されるフレームワークの 1 つになるにつれて、ますます多くの開発者が Vue.js プラグイン開発に参加し始めています。 Vue.js プラグインは、グローバルにインストールして再利用できる機能コンポーネントであり、Vue.js 自体の機能を強化したり、Vue.js フレームワークに新しい機能を追加したりできます。 Vue.js バージョン 3.0 では、プラグイン開発がより簡単かつ便利になりましたので、この記事では、Vue.js カスタムプラグインを開発に使用する方法を紹介します。

1. Vue.js プラグインとは

Vue.js プラグインは、Vue.js フレームワークの機能を強化するために使用される独立したコンポーネントであり、新しい命令を提供できます。 Vue.js デバイス、コンポーネント、その他の機能のフィルター。まず最初に、明確にする必要があります。Vue.js プラグインは、Vue.js アプリケーションの一部としてロードされるコンポーネントではなく、Vue.js 自体の一部としてロードおよび初期化されるコンポーネントです。 Vue.js プラグインは他の開発者が簡単に導入して使用できるため、Vue.js アプリケーションの実装が容易になります。

2. Vue.js プラグインの使用

Vue.js プラグインの使用は 2 つのステップに分かれています。まず、アプリケーションで使用する前に、プラグインを Vue.js にインストールする必要があります。

プラグインのインストール

Vue.js アプリケーションでは、Vue.use() メソッドを使用してプラグインをインストールする必要があります。このメソッドはプラグインオブジェクトをパラメーターとして受け取り、そのプラグインオブジェクトを Vue.js アプリケーションにインストールします。

たとえば、MyPlugin という名前のプラグインオブジェクトを作成しました。

const MyPlugin = {
  installed: false,
  install(Vue, options) {
    if (this.installed) return;
    this.installed = true;
    // 在此处注册新的指令、过滤器、组件等。
  }
}

ログイン後にコピー

このプラグインオブジェクトでは、プラグインの初期化を行う install() メソッドを定義します。実行できます。 install() メソッドでは、グローバルディレクティブ、フィルター、コンポーネントなどを登録できます。同時に、現在のプラグインがインストールされているかどうかを判断し、インストールの繰り返しを回避するために、プラグインオブジェクトの installed 属性を維持する必要もあります。

次に、Vue.js アプリケーションの Vue.use() メソッドを使用してプラグインをインストールします。

import Vue from 'vue';
import MyPlugin from './my-plugin';

Vue.use(MyPlugin, { someOption: true });

ログイン後にコピー

ここでは、ES6 インポート構文を使用して MyPlugin プラグインオブジェクトを導入します。そして、そのオブジェクトを Vue.use() メソッドのパラメータとして使用します。さらに、初期化時にプラグインを構成するために、オプションオブジェクトを Vue.use() メソッドに渡すことができます。 MyPlugin プラグインオブジェクトの install() メソッドでは、options パラメーターを介してこれらの構成オプションにアクセスできます。

プラグインの使用

Vue.js アプリケーションにプラグインをインストールしたので、プラグインが提供する機能を使用できるようになります。 Vue.js プラグインの機能は、グローバルまたはローカルで使用できます。

Vue.js アプリケーションでは、Vue.directive() メソッドを使用してグローバルディレクティブを登録し、Vue.filter() メソッドを使用してグローバルフィルターを登録し、Vue.component() メソッドを使用してグローバルディレクティブを登録できます。コンポーネントなどたとえば、MyPlugin プラグインオブジェクトの install() メソッドに my-component という名前のコンポーネントを登録しました。

const MyPlugin = {
  installed: false,
  install(Vue, options) {
    if (this.installed) return;
    this.installed = true;

    Vue.component('my-component', {
      /* 组件选项 */
    })
  }
}

ログイン後にコピー

次に、Vue.js アプリケーションで、Vue.js を次のように使用できます。コンポーネントは組み込みコンポーネントと同じです。

<template>
  <div>
    <my-component></my-component>
  </div>
</template>

<script>
export default {
  // 组件选项
}
</script>

ログイン後にコピー

グローバルコンポーネントを登録する場合、コンポーネント名は小文字で始まる必要があり、テンプレート内の複数の単語を接続するにはダッシュを使用する必要があることに注意してください。

特定のページまたはコンポーネントでのみプラグイン機能を使用したい場合は、ページまたはコンポーネントでローカルにプラグインを登録することもできます。

<template>
  <div>
    <my-component></my-component>
  </div>
</template>

<script>
import MyPlugin from '@/my-plugin';

export default {
  components: {
    'my-component': MyPlugin.myComponent
  }
}
</script>

ログイン後にコピー

ここでは、次のように使用します。 ES6 インポートこの構文では、MyPlugin プラグインオブジェクトを導入し、そのオブジェクトをローカルコンポーネントで使用する必要があるコンポーネントオブジェクトとして登録します。

3. プラグインの使用例

次に、Vue.js カスタムプラグインを開発に使用する例を見てみましょう。アプリケーションが非同期操作を実行するときに自動的に表示/非表示を切り替えるグローバル読み込みインジケーターを開発する必要があるとします。この関数を実装するには、LoadingIndicator という名前のプラグインを作成します。

const LoadingIndicator = {
  installed: false,
  install(Vue, options) {
    if (this.installed) return;
    this.installed = true;

    const indicator = new Vue({
      template: `
        <div v-if="loading" class="loading-indicator">
          <div class="loading-spinner"></div>
        </div>
      `,
      data() {
        return {
          loading: false
        }
      }
    })

    const mountIndicator = () => {
      const component = indicator.$mount();
      document.body.appendChild(component.$el);
    }

    Vue.prototype.$loading = {
      show() {
        indicator.loading = true;
        mountIndicator();
      },
      hide() {
        indicator.loading = false;
        document.body.removeChild(indicator.$el);
      }
    };

    Vue.mixin({
      beforeCreate() {
        this.$loading = Vue.prototype.$loading;
      }
    });
  }
}

export default LoadingIndicator;

ログイン後にコピー

LoadingIndicator プラグインオブジェクトの install() メソッドで、最初に Vue インスタンスをインジケーターのテンプレートとして定義します。その後、Vue インスタンスを body 要素にマウントし、インジケーターの表示と非表示をグローバルに制御する $loading グローバル API を定義しました。同時に、すべてのコンポーネントが $loading API にアクセスできるように、Vue.mixin() メソッドでグローバルミックスインを定義しました。

これで、グローバルに使用できる LoadingIndicator プラグインを作成しました。 Vue.js アプリケーションでプラグインを使用するのは非常に簡単です。

import Vue from 'vue';
import LoadingIndicator from '@/loading-indicator';

Vue.use(LoadingIndicator);

// 在异步操作开始时显示加载指示器
this.$loading.show();

// 在异步操作完成后隐藏加载指示器
this.$loading.hide();

ログイン後にコピー

ここでは、まず Vue.use() メソッドを使用して LoadingIndicator プラグインを Vue.js アプリケーションにインストールします。次に、非同期操作を必要とするコードブロック内で this.$loading.show() メソッドを呼び出して読み込みインジケーターを表示し、次に this.$loading.hide() メソッドを呼び出して非同期操作の完了後に読み込みインジケーターを非表示にします。 . .

概要

Vue.js プラグインは、Vue.js フレームワークの機能を簡単に拡張できる強力な機能です。 Vue.js 3.0 のリリースにより、プラグインの開発と使用がより便利かつ柔軟になりました。この記事では、Vue.use() メソッドを使用してプラグインをインストールする方法、グローバルディレクティブ、フィルター、コンポーネントを登録する方法、ページまたはコンポーネントでローカルにプラグインを使用する方法を紹介しました。最後に、グローバルローディングインジケータープラグインの例も使用して、Vue.js プラグイン開発の実際のアプリケーションを示しました。

以上がVUE3 開発の基本: Vue.js カスタムプラグインを使用した開発の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。