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データのグループ化の詳細な説明

グループを作成グループ化は、SELECT ステートメントの GROUP BY 句で設定されます。例:...

JavaScriptのイベントループの仕組みの分析

目次序文: 1. イベント ループとタスク キューの理由: 2. イベントループメカニズム: 3. ...

MySQLが数十億のトラフィックをサポートする方法

目次1 マスター・スレーブの読み取り・書き込み分離1.1 コア2 マスタースレーブレプリケーション2...

Mysql の一時テーブルとパーティションテーブルの違いの詳細な説明

一時テーブルとメモリテーブルメモリ テーブルとは、メモリ エンジンを使用するテーブルを指します。テー...

dockerカスタムイメージでphp7をビルドする方法

まず、簡単な Docker インストールを実行します。イメージをカスタマイズするには、ベースイメージ...

React Native APPのアップデートに関する簡単な説明

目次アプリ更新プロセス大まかなフローチャートアプリ情報の更新1. まず取得する必要があるファイルアド...

MySQL データベースの Binlog 使用法の概要 (必読)

MySQL データベースにとって binlog バイナリ ログがどれほど重要であるかについては詳し...

MacにMySQLデータベースをインストールする方法を教えます

Mac 用 MySQL をダウンロード: https://downloads.mysql.com/a...

Ubuntu システムでタイムゾーンと時刻を変更する方法

Linux コンピュータには 2 つの時間があります。1 つはハードウェア時間 (BIOS に記録さ...

VMware Workstation 14 Pro のインストールとアクティベーションのグラフィック チュートリアル

この記事では、VMware Workstation 14 Proのインストールとアクティベーションに...

jsでの位置計算を徹底的に理解するのに役立つ記事

目次導入スクロール要素.スクロール()要素.scrollHeight/scrollWidth要素.s...

シンプルなウェブページレイアウトの構造と表現原理の共有

構造とパフォーマンスの紹介HTML 構造、CSS 表現、JavaScript 動作。Web ページの...

HTML タグ マーキーはさまざまなスクロール効果を実現します (JS 制御なし)

ページの自動スクロール効果は JavaScript で実現できますが、今日偶然、JS 制御なしでさま...

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

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

MacでのMySQL5.7.22のインストール手順

1. インストールパッケージを使用してMySQLをインストールします(オンラインダウンロードは遅すぎ...