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 の長さ制限を変更する方法

推薦する

Webpack5-react スキャフォールディングをゼロから構築するための実装手順 (ソースコード付き)

目次ウェブパック5公式スタート建築ガイド構築を開始する依存する準備が完了したら、プロジェクトの構築を...

Linux の crontab タスク スケジューリングの簡単な分析

1. スケジュールタスクを作成する命令crontab -eは現在のユーザーの編集インターフェースに入...

Windows で mysql-8.0.18-winx64 をインストールするチュートリアル (画像とテキスト付き)

1. インストールパッケージをダウンロードするインストール パッケージは次の場所にあります:参考:...

Win7 で IIS7 Web および FTP サービスを完全にアンインストールする方法

昨日、パソコンにPHP開発環境をセットアップした後、Apacheサーバーを再起動するとエラーが続きま...

Vue axios インターセプターは、繰り返しリクエストのキャンセルによく使用されます。

導入前回の記事では、axios のシンプルなカプセル化と、axios インターセプターの適用シナリオ...

Nginx を使用してフロントエンドのクロスドメイン問題を解決する方法

序文Vue アプリケーションなどの静的ページを開発する場合、クロスドメインになる可能性のあるインター...

WeChatアプレットは写真の撮影とアルバムからの写真の選択を実現します

この記事では、WeChatアプレットで写真を撮ったり、アルバムから写真を選択したりするための具体的な...

Linuxコマンドに基づいてフォルダー内の特定のファイルパスを抽出します

最近では、特定のフォルダ内の特定のファイルを自動的に検索する必要があり、ファイルパスとファイル名を別...

タブ切り替え機能を実装するJavaScriptカスタムプラグイン

この記事では、タブ切り替え機能を実装するためのJavaScriptの具体的なコードを参考までに共有し...

html-webpack-plugin' を使用してメモリ内に HTML ページ プラグインを生成します。

webpackjs ファイルをパッケージ化するときに、次に示すように、index.html インタ...

YUMを使用してdockerをインストールする方法

次の図に示すように: Centos 7.0以上であれば問題ありません。現在のシステム カーネル バー...

JavaScript を使用して文字列内の最も繰り返しの多い文字を取得する方法

目次トピック分析する使用目的解決:コードは次のように実装されます。分析:配列とポインタ解決:コードは...

Vueは動的に生成されたコンポーネントをドラッグアンドドロップする要件を実装します

目次製品要件アイデア問題ライブラリ選択をドラッグコンポーネントを生成する方法コンポーネントを生成する...

Vue3 カプセル化された虫眼鏡コンポーネントのサンプルコード

目次コンポーネントインフラストラクチャ目的: 画像拡大鏡機能を実現するvueuseをインストールする...