Vue の高度な使用方法チュートリアル 動的コンポーネント

Vue の高度な使用方法チュートリアル 動的コンポーネント

開発プロセスでは、ほとんどの場合、動的コンポーネントが使用されると思います。異なるコンポーネント間で状態を切り替える必要がある場合、動的コンポーネントはニーズを非常にうまく満たすことができます。その中核となるのは、コンポーネント タグと is 属性の使用です。

基本的な説明

// ビュー
<div id="アプリ">
  <button @click="changeTabs('child1')">子1</button>
  <button @click="changeTabs('child2')">子2</button>
  <button @click="changeTabs('child3')">子3</button>
  <コンポーネント :is="タブを選択">
  </コンポーネント>
</div>
// js
var 子1 = {
  テンプレート: '<div>content1</div>',
}
var 子2 = {
  テンプレート: '<div>content2</div>'
}
var 子3 = {
  テンプレート: '<div>content3</div>'
}
var vm = 新しい Vue({
  el: '#app',
  コンポーネント:
    子供1、
    子供2、
    子供3
  },
  メソッド: {
    タブを変更する
      this.chooseTabs = タブ;
    }
  }
})

AST 解析

<component> の解釈は、これまでの記事と同様です。まずは AST 解析の段階から始めます。このプロセスでは細部にまで焦点を当てるのではなく、これまでの処理方法との違いを具体的に説明します。動的コンポーネント解析の違いは、processComponent に焦点が当てられています。タグに is 属性が存在するため、最終的な ast ツリーにコンポーネント属性がマークされます。

// 動的コンポーネントの分析 function processComponent (el) {
  var バインディング;
  // is属性に対応する値を取得します if ((binding = getBindingAttr(el, 'is'))) {
    // ast ツリーには追加のコンポーネント属性があります el.component = binding;
  }
  getAndRemoveAttr(el, 'インラインテンプレート') != null の場合 {
    el.inlineTemplate = true;
  }
}

レンダリング機能

ast ツリーの次のステップは、ast ツリーに基づいて実行可能なレンダリング関数を生成することです。コンポーネント属性により、レンダリング関数の生成プロセスは genComponent ブランチを経由します。

//レンダリング関数生成関数 var code = generate(ast, options);

// 生成関数の実装 function generate (ast,options) {
  var state = new CodegenState(オプション);
  var code = ast ? genElement(ast, state): '_c("div")';
  戻る {
    レンダリング: ("with(this){return " + code + "}"),
    静的レンダリング関数: state.staticRenderFns
  }
}

関数genElement(el, state) {
  ···
  var コード;
  // 動的コンポーネントブランチ if (el.component) {
    コード = genComponent(el.component, el, 状態);
  }
}

動的コンポーネントの処理ロジックは、実は非常に単純です。インライン テンプレート フラグ (後述) がない場合、後続の子ノードがスプライシング用に取得されます。通常のコンポーネントとの唯一の違いは、_c の最初のパラメーターが指定された文字列ではなく、コンポーネントを表す変数になっていることです。

// 動的コンポーネントの処理関数 genComponent (
    コンポーネント名、
    エル、
    州
  ){
    // inlineTemplate属性が設定されている場合、childrenはnullになります
    var children = el.inlineTemplate ? null : genChildren(el, state, true);
    
    戻り値: ("_c(" + コンポーネント名 + "," + (genData$2(el, 状態)) + 
    (子供 ? ("," + 子供) : '') + ")")
  }

通常コンポーネントと動的コンポーネントの比較

通常のコンポーネントのレンダリング機能

"with(this){return _c('div',{attrs:{"id":"app"}},[_c('child1',[_v(_s(test))])],1)}"

動的コンポーネントレンダリング機能

"with(this){return _c('div',{attrs:{"id":"app"}},[_c(chooseTabs,{tag:"component"})],1)}"

簡単にまとめると、動的コンポーネントと通常のコンポーネントの違いは次のとおりです。

  1. コンポーネント属性はastステージに追加され、動的コンポーネントの兆候である。
  2. レンダリング関数生成フェーズでは、コンポーネント属性が存在するため、genComponent ブランチが実行されます。genComponent は、動的コンポーネントの実行関数に対して特別な処理を実行します。通常のコンポーネントとは異なり、_c の最初のパラメータは不変の文字列ではなく、指定されたコンポーネント名の変数になります。
  3. レンダリングから vnode までのプロセスは、文字列が変数に置き換えられ、データ属性が { tag: 'component' } になることを除いて、通常のコンポーネントと同じです。この例では、chooseTabs は child1 を取得します。

ファクトリ関数形式の動的コンポーネント

次のように、ファクトリ関数の形式で動的コンポーネントを使用することもできます。

const AsyncComponent = () => ({

  // ロードするコンポーネント(`Promise` オブジェクトである必要があります)

  コンポーネント: import('./MyComponent.vue'),

  //非同期コンポーネント読み込み時に使用されるコンポーネント読み込み: LoadingComponent、

  // 読み込み失敗時に使用されるコンポーネント error: ErrorComponent,

  // ロード中のコンポーネントの遅延時間を表示します。デフォルト値は200(ミリ秒)です

  遅延: 200、

  // タイムアウトが指定されていてコンポーネントの読み込みがタイムアウトした場合、

  // 読み込みに失敗した場合に使用したコンポーネントを使用します。デフォルト値は: `Infinity`

  タイムアウト: 3000

});



コンポーネント:

  非同期コンポーネント、

},

要約する

Vue 動的コンポーネントの高度な使用法に関するこの記事はこれで終わりです。Vue 動的コンポーネントに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue 動的コンポーネントインスタンス分析
  • Vue の動的コンポーネントと非同期コンポーネントの例の詳細な説明
  • Vue 動的サブコンポーネントを実装する 2 つの方法
  • Vueでコンポーネントを動的に作成する2つの方法
  • Vueカスタム動的コンポーネントの例の詳細な説明
  • フロントエンドアーキテクチャで Vue 動的コンポーネントを使用する基本的なチュートリアル

<<:  Docker Composeでコンテナ管理の問題を解決する

>>:  HTML入力ボックスの最適化により、ユーザーエクスペリエンスと使いやすさが向上します。

推薦する

MySQL マルチバージョン同時実行制御 MVCC の実装

トランザクション分離レベルの設定 グローバルトランザクション分離レベルを読み取りコミット済みに設定;...

MySQL関連のツールをいくつかお勧めします

序文:インターネット技術の継続的な発展に伴い、MySQL 関連のエコシステムはますます充実し、ますま...

HTML フォームタグチュートリアル (4):

ここで、次のような項目をフォームに追加したいとします: 現在いる都市を参照します。ここで私たちが話し...

JavaScript の実行コンテキストとコールスタックの詳細な説明

目次1. 実行コンテキストとは何か2. 実行コンテキスト スタックとは何ですか? 3. 実行コンテキ...

UTF-8 および GB2312 ウェブエンコーディング

最近、多くの学生から Web ページのエンコーディングについて質問を受けています。gb2312 と ...

MySQL 自動インクリメント ID 枯渇の例

ディスプレイ定義IDテーブルに定義された自動増分IDが上限に達した場合、次のIDを申請する際に得られ...

シンプルなページング効果を実現するjQuery+Ajax

この記事では、ページング効果を実現するためのjquery+Ajaxの具体的なコードを参考までに紹介し...

衝突検出を実装するためのjs

この記事の例では、衝突検出を実装するためのjsの具体的なコードを参考までに共有しています。具体的な内...

Linux で JDK 環境を構成する方法

1. 公式ウェブサイトにアクセスして、jdk-8u162-linux-x64.tar.gzなどのLi...

Flask アプリケーションの Docker デプロイ実装手順

1. 目的Flask アプリケーションをローカルで作成し、Docker でパッケージ化し、独自のサー...

Linux で MySQL のルート パスワードを変更する方法

序文このサービスは数か月前からMySQLに導入されています。私の仕事は基本的にターミナルで行われるた...

JavaScript コンソールのその他の機能

目次概要コンソールログコンソール.infoコンソール.警告コンソールエラーコンソールテーブルコンソー...

Linux でコマンドまたはプロセスの実行時間を調べる方法

Unix ライクなシステムでは、コマンドまたはプロセスの実行がいつ開始されたか、またプロセスがどのく...

MySQL の結合フィールドの Concat()

目次1. はじめに2. 本文2.1 フィールドの連結2.2 フィールドでの算術計算の実行1. はじめ...