Vue3のグローバル関数を詳しく解説：グローバルメソッド呼び出しをより便利にするアプリケーション-Vue.js-php.cn

Vue3 のグローバル関数の詳細説明: より便利なグローバルメソッド呼び出しを可能にするアプリケーション

Vue3 は Vue.js フレームワークの最新バージョンであり、その新しい設計には新機能も導入されています。その中でもグローバル関数は Vue2 と比較して Vue3 の非常に注目すべき新機能です。グローバル関数の導入により、グローバルメソッドの呼び出しがより便利かつ効率的になり、繰り返しコードを記述する必要性も効果的に減らすことができます。この記事では、Vue3 のグローバル関数を詳細に紹介し、関連する例を通じてその具体的なアプリケーションを説明します。

Vue3 でのグローバル関数の定義

グローバル関数とは、Vue3 のコンポーネントの外部で定義でき、すべてのコンポーネントで共有してアクセスできる関数を指します。 Vue3 では、次のメソッドを通じてグローバル関数を定義できます。

app.config.globalProperties.$helper = function() { // 方法体 };

ログイン後にコピー

このうち、appは Vue アプリケーションインスタンス、configはグローバル設定オブジェクトです。globalPropertiesグローバルプロパティとメソッドを定義できます。今回は、$helperという名前のグローバル関数を定義します。

Vue2 では、グローバル関数は通常main.jsで定義されますが、Vue3 では、グローバル関数はcreateApp# のコールバック関数内にある必要があることに注意してください。 ## 定義されていなければ、エラーが発生します。

グローバル関数を使用すると、どのコンポーネントでも簡単に関数を呼び出すことができます具体的な使い方は次のとおりです:

ログイン後にコピー

したがって、グローバル関数を定義すると、すべてのコンポーネントでその関数を呼び出すことができます。コンポーネントコンポーネント内で

$helper()を通じて呼び出すと非常に便利です。

さらに、異なる関数名を個別に宣言するだけで、複数のグローバル関数を定義することもできます。

Vue3 でのグローバル関数のアプリケーション

グローバル関数の定義方法を理解したところで、いくつかの具体的なアプリケーションケースを使用して、その具体的な使用法を説明します。

1. データformatting

Vue3 では、グローバル関数を通じてデータをフォーマットできます。たとえば、フロントエンド開発では、時刻を文字列形式に変換する必要がある状況によく遭遇しますが、このとき、それを処理するグローバル関数を定義できます:

app.config.globalProperties.$formatDate = function(date) { const year = date.getFullYear(); const month = date.getMonth(); const day = date.getDay(); return `${year}-${month}-${day}`; };

ログイン後にコピー

このようにして、

$ formatDate()メソッドを使用して、書式設定時の操作を実装できます。

2. ユニバーサルメソッドのカプセル化

グローバル関数を使用して、ユニバーサルメソッドをカプセル化することもできます。たとえば、Axios は開発でネットワークリクエストを送信するためによく使用されますが、これをカプセル化するグローバル関数を定義できます:

app.config.globalProperties.$axios = function(config) { return axios(config).then(response => { return response.data; }).catch(error => { console.log(error); }); };

ログイン後にコピー

このようにして、すべてのコードに

$axios()を渡すことができます。コンポーネントメソッドを使用してネットワークリクエストを送信し、ネットワークリクエストコードの繰り返しの記述を効果的に減らすこともできます。

3. 共有メソッド呼び出し

Vue3 では、コンポーネントインスタンスがグローバルオブジェクトで公開されなくなったため、他のコンポーネントのメソッドにアクセスするときは、パラメーターを渡すか、イベントを使用して実行する必要があります。グローバル関数を使用すると、この問題を解決できます。

たとえば、コンポーネント内で、別のコンポーネント内のメソッドを呼び出す必要があります。

// 通过 $root 调用父曾内部的方法 this.$root.$refs['app-header'].$toggleSidebar();

ログイン後にコピー

このメソッドは実行可能ですが、面倒すぎます。グローバル関数を定義して、より便利なメソッド呼び出しを実現できます。

app.component('AppHeader', { mounted() { app.config.globalProperties.$toggleSidebar = this.toggleSidebar; }, methods: { toggleSidebar() { // 方法体 } } })

ログイン後にコピー

このようにして、どのコンポーネントでも、

$toggleSidebar()メソッドを通じて親コンポーネントを簡単に呼び出すことができます。内部関数。

概要

グローバル関数は Vue3 の非常に重要な新機能であり、メソッド呼び出しをより便利かつ効率的にしながら、繰り返しコードを記述する必要性を効果的に削減できます。 Vue3 の開発では、グローバル関数を使用してデータの整形、一般的なメソッドのカプセル化、共有メソッドの呼び出しなどの一連の操作を実行できるため、開発効率の向上と冗長コードの削減に役立ちます。

以上がVue3のグローバル関数を詳しく解説：グローバルメソッド呼び出しをより便利にするアプリケーションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。