Vueコンポーネント登録方法の解釈

Vueコンポーネント登録方法の解釈

概要

コンポーネント化の概念により、フロントエンド ページの開発に明確な構造が与えられます。

Vue のコンポーネントは、Vue のインスタンス オブジェクトです。したがって、Vue コンポーネントの構築オプションは、Vue インスタンスを構築するための new Vue() メソッドの構築オプションと同じであり、許容される構築オプションも同じです。 el などのルートインスタンス固有のオプションを除きます。ただし、Vue コンポーネントは再利用可能である必要があるため、構築オプションのデータ オプションはオブジェクトを返す関数である必要があります。

コンポーネントの再利用性を確保するために、データ オプションをオブジェクトを返す関数にできるのはなぜですか?

new Vue() メソッドを使用して Vue インスタンスを作成する場合でも、Vue コンポーネントを定義して Vue インスタンスを作成する場合でも、実行される操作は、構築オプションのプロパティ値を新しく作成された Vue インスタンス オブジェクトに直接割り当てることです。コンポーネントの再利用とは、Vue が同じ構築オプションを使用して、同じ名前だがアドレスが異なる複数の Vue インスタンス オブジェクトを構築することを意味します。 Vue コンポーネントを定義するときの構築オプションのデータ オプションがオブジェクトである場合、データ オブジェクトのアドレスがコンポーネントの Vue インスタンスに直接割り当てられるため、コンポーネントが再利用されると、複数のコンポーネントがデータ オブジェクトを共有することになります。ただし、コンポーネントを定義するときのデータ オプションが関数の場合、Vue は構築オプションに従ってコンポーネントを作成するときに関数を実行し、オブジェクトを取得します。このように、データ オブジェクトは Vue インスタンスが作成されるたびに再生成されます。そのため、複数のコンポーネントはそれぞれ独自のデータ オブジェクトを持ち、互いに影響を与えることはありません。

実際には、コンポーネントが登録されると、コンポーネントの構築オプションが定義され、コンポーネントが使用されるときに対応する Vue コンポーネント インスタンスが実際に作成されます。

1. グローバル登録

グローバルに登録されたコンポーネントは、Vue ルートインスタンスとすべての子コンポーネントで使用できます。登録エントリは Vue.component() 関数です。一度登録しておけばいつでも使用できます。登録方法は以下の通りです。

Vue.component('コンポーネント名', { 
    オプション 
})

次に例を示します。

//メイン.js
//この例は、vue-cli で作成されたプロジェクトです。デフォルトでは vue の不完全なバージョンであり、テンプレート オプションは使用できないため、render 関数を使用してコンポーネント コンテンツを書き込みます。
Vue.component('all-test',{
  データ(){
    戻る {
      x: 「私はグローバルコンポーネントです」
    }
  },
  レンダリング(h){
    h('div',this.x) を返します
  }
})

//グローバルに登録されたコンポーネントは直接使用できます //App.vue
<テンプレート>
  <div id="アプリ">
    <全テスト />
  </div>
</テンプレート>

2. 現地登録

ローカル登録では、プレーンな JavaScript オブジェクトを介してコンポーネントを定義します。次に、コンポーネントに名前が付けられ、Vue インスタンス構築オプションのコンポーネント オプションに登録されます。

コンポーネント = { オプション }

//new Vue はルート要素 Vue インスタンスを作成します new Vue({
    el: '#app'
    コンポーネント:
        'my-component-name': コンポーネント
    }
})

//または、Vueコンポーネントによって作成されたVueインスタンスを登録します export default {
    コンポーネント:
        'my-component-name': コンポーネント
    }
}

次に例を示します。

//アプリ.vue
<テンプレート>
  <div id="アプリ">
    <全テスト />
    <コンポーネント-a />
    <コンポーネント-b />
  </div>
</テンプレート>

<スクリプト>
ComponentA = {
  データ(){
    戻る {
      x: 「私はローカルコンポーネントAです」
    }
  },
  レンダリング(h){
    h('div',this.x) を返します
  }
}

エクスポートデフォルト{
  名前: 'アプリ'、
  コンポーネント:
    'コンポーネント-a': コンポーネントA、
    'コンポーネント-b': {
        データ(){
          戻る {
            x: 「私はローカルコンポーネントBです」
          }
        },
        レンダリング(h){
          h('div',this.x) を返します
        }
    } 
  }
}
</スクリプト>

3. モジュールシステムへのローカル登録

Babel や webpack などのモジュール システムでは、import と export を使用して、コンポーネント構築オプション オブジェクトまたは構築オプションに対応する *.vue ファイルをインポートできます。

//c.js
エクスポートデフォルト{
    データ(){
        戻る {
          x: '私はc.jsファイルによって個別にエクスポートされたコンポーネント構築オプションオブジェクトです'
        }
      },
      レンダリング(h){
        h('div',this.x) を返します
      }
}

//D.vue
<テンプレート>
    <div>
        {{x}}
    </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
    データ(){
        戻る {
            x: '私はD.vueファイルによってエクスポートされたコンポーネントです'
        }
    }
}
</スクリプト>

//アプリ.vue
<テンプレート>
  <div id="アプリ">
    <C />
    <D />
  </div>
</テンプレート>

'./c.js' から C をインポートします
'./components/D.vue' から D をインポートします。

エクスポートデフォルト{
  名前: 'アプリ'、
  コンポーネント:
    C、
    だ 
  }
}
</スクリプト>

以上がVueコンポーネント登録方法の詳細な解説です。Vueコンポーネント登録方法についての詳細は、123WORDPRESS.COMの他の関連記事にも注目してください。

以下もご興味があるかもしれません:
  • Vue でコンポーネントを一括インポート、登録、使用する方法
  • vueは基本コンポーネントの自動グローバル登録を実装します
  • Vue コンポーネント登録の完全分析
  • Vueコンポーネント登録の詳細な説明
  • Vueコンポーネント登録例の詳しい説明
  • Vueコンポーネントとコンポーネント登録方法についての簡単な説明
  • Vue でコンポーネントを登録するいくつかの方法のまとめ
  • Vue コンポーネントの構成構造とコンポーネント登録の詳細

<<:  Ubuntu 基本チュートリアル: apt-get コマンド

>>:  Mysql で group_concat の長さ制限を変更する方法

推薦する

大規模な MySQL テーブルに対する count() の実装を最適化しました

以下は、B+ ツリーのデータ構造と実験結果からの推測に基づいた私の判断です。間違いがあればご指摘くだ...

JavaScript で動的な QML オブジェクトを作成する方法

1. オブジェクトを動的に作成するJavaScript からオブジェクトを動的に作成する方法は 2 ...

Mysqlマスタースレーブ同期の実装原理

1. MySQL マスター/スレーブ同期とは何ですか?マスター データベースのデータが変更されると、...

サーバー同時実行数の推定式と計算方法

最近、サーバーのストレステストを再度行う必要が出てきました。ここでは、最近学んだ見積もりスキームと見...

ドメイン名を nginx サービスにバインドする方法

nginx.conf で複数のサーバーを設定します。 http リクエストを処理する際、nginx ...

MySQL の低速クエリの最適化: 理論と実践からの制限の利点

多くの場合、クエリの結果は最大で 1 つのデータ レコードになることが予想されます。この場合、制限 ...

Vue3.0はドロップダウンメニューのカプセル化を実装します

Vue3.0 がリリースされてからしばらく経ちましたが、勉強を始める必要があります。まず、達成したい...

nginx が複数のプロキシ層を通過して実際の送信元 IP を取得するプロセスの詳細な説明

質問Nginx は $remote_addr を実際の IP アドレスとして受け取りますが、実際には...

CocosCreator の新しいリソース管理システムの分析

目次1. 資源と建設1.1 クリエイターリソースファイルの基本1.2 リソースの構築2. アセットバ...

react setStateの詳細な説明

目次setState は同期ですか、それとも非同期ですか?カスタム合成イベントと React フック...

MySQL DDLステートメントの使用

序文SQL の言語分類には主に以下の種類があります。 DDLデータ定義言語作成、削除、変更データ定義...

テーブルを動的に読み込み、削除する JavaScript

この記事では、テーブルを動的に読み込み、削除するためのJavaScriptの具体的なコードを参考まで...

Vueドロップダウンリストの2つの実装方法の比較

Vueドロップダウンリストの2つの実装最初の方法はv-forを使用する <el-select ...

Mysqlはブール型の演算を設定します

Mysqlはブール型を設定します1. Tinyintタイプテストテーブルを作成し、blフィールドをブ...

CentOS 7 で MySQL 5.7.23 をアップグレードする際の落とし穴と解決策

序文最近、CentOS 7 で MySQL 5.7.23 をアップグレードする際に落とし穴を発見しま...