vue のグローバル メソッドとインスタンス メソッドの違いは何ですか

vue のグローバル メソッドとインスタンス メソッドの違い: 1. グローバル メソッドは「Vue.myGlobalMethod」を通じて呼び出され、インスタンス メソッドは「this.$myMethod」を通じて呼び出されます。2. グローバル メソッドvue で定義されている静的メソッドとインスタンス メソッドはコンポーネント内で定義できます。

このチュートリアルの動作環境: Windows10 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

vue のグローバル メソッドとインスタンス メソッドの違いは何ですか

開発では、再利用性を向上させ、コードを簡素化するために、多くの場合、コードの共通部分が抽出されて再利用可能なモジュールが形成されます。コードを抽出してモジュールを形成した後、どこでも参照できるように、これらのモジュールをグローバル属性として設定する必要があります。したがって、グローバル パブリック メソッドを実装するには、次の知識ポイントを知っておく必要があります:

グローバル プロパティの設定方法;

グローバル プロパティの参照方法;

1. Setグローバル プロパティ

グローバル属性は、グローバル変数とグローバル メソッドに分類できます。グローバル変数を実装する一般的な方法は、vuex を使用することです (vuex の使用についてはここでは詳しく説明しません)。もう 1 つの方法は、プロトタイプ属性を使用してそれを実現することです。次にプロトタイプに焦点を当てます。

2. グローバル プロパティの参照

Vue を使用する場合、次のコード文字列を記述する必要があります:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

上記のコードは、Vue コンストラクターを使用して Vue オブジェクトを作成します。

このことから、Vue は実際にはオブジェクトであることがわかります。次に、Vue のプロトタイプを使用して、グローバル プロパティへの参照を実装できます。まず最初に、次の知識ポイントを理解する必要があります。

プロトタイプとは何ですか?

js コードでは、属性プロトタイプがよく見られます。これはコンストラクター (オブジェクトの構築に使用される関数) の属性であり、プロトタイプ オブジェクトを指すために使用されます。では、プロトタイプオブジェクトとは何でしょうか? 「プロトタイプ・オブジェクト」を理解するには、「プロトタイプ」と「オブジェクト」を分けて説明する必要があります。

まずオブジェクトについて話しましょう。js には、文字列、数学、オブジェクト、配列など、多くの組み込みオブジェクトがあります。

// 声明一个数组对象
const arr = Array();

上記は、組み込みオブジェクト (配列のコンストラクター) を使用して配列を作成する方法です。

もちろん、カスタム オブジェクトを設定することもできます。つまり、新しいオブジェクトを自分で設定することもできます。

const obj = {};

上記のコードは空のオブジェクトを設定します。

Vue インスタンスは、いくつかの便利なインスタンス プロパティとメソッドを公開します。これらのプロパティとメソッドには、プロキシのデータ プロパティと区別するために $ という接頭辞が付いています。

コンポーネント ツリー

• $parent: コンポーネント インスタンスの親インスタンスにアクセスするために使用されます

• $root: 現在のコンポーネント ツリーのルート インスタンスにアクセスするために使用されます。

• $children: コンポーネント ツリーの直接の子コンポーネント インスタンスにアクセスするために使用されます。現在のコンポーネント インスタンス

• $refs: v-ref ディレクティブへのアクセスに使用されるサブコンポーネント

DOM アクセス

• $el : 現在のコンポーネント インスタンスの DOM 要素をマウントするために使用されます

• $els: $el 要素の v-el ディレクティブを使用して DOM 要素にアクセスするために使用されます

違い

グローバル メソッドは window.myGlobalMethod として理解できます。Vue.myGlobalMethod を通じて呼び出された場合、これは Vue.

ここで説明します。インスタンス メソッドは、this.$myMethod

vue.js チュートリアル"]## を通じてコン​​ポーネント内で呼び出すことができます。 #

以上がvue のグローバル メソッドとインスタンス メソッドの違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。