開発プロセスでは、ほとんどの場合、動的コンポーネントが使用されると思います。異なるコンポーネント間で状態を切り替える必要がある場合、動的コンポーネントはニーズを非常にうまく満たすことができます。その中核となるのは、コンポーネント タグと 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)}" 簡単にまとめると、動的コンポーネントと通常のコンポーネントの違いは次のとおりです。
ファクトリ関数形式の動的コンポーネント次のように、ファクトリ関数の形式で動的コンポーネントを使用することもできます。 const AsyncComponent = () => ({ // ロードするコンポーネント(`Promise` オブジェクトである必要があります) コンポーネント: import('./MyComponent.vue'), //非同期コンポーネント読み込み時に使用されるコンポーネント読み込み: LoadingComponent、 // 読み込み失敗時に使用されるコンポーネント error: ErrorComponent, // ロード中のコンポーネントの遅延時間を表示します。デフォルト値は200(ミリ秒)です 遅延: 200、 // タイムアウトが指定されていてコンポーネントの読み込みがタイムアウトした場合、 // 読み込みに失敗した場合に使用したコンポーネントを使用します。デフォルト値は: `Infinity` タイムアウト: 3000 }); コンポーネント: 非同期コンポーネント、 }, 要約するVue 動的コンポーネントの高度な使用法に関するこの記事はこれで終わりです。Vue 動的コンポーネントに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Docker Composeでコンテナ管理の問題を解決する
>>: HTML入力ボックスの最適化により、ユーザーエクスペリエンスと使いやすさが向上します。
トランザクション分離レベルの設定 グローバルトランザクション分離レベルを読み取りコミット済みに設定;...
序文:インターネット技術の継続的な発展に伴い、MySQL 関連のエコシステムはますます充実し、ますま...
ここで、次のような項目をフォームに追加したいとします: 現在いる都市を参照します。ここで私たちが話し...
1. 現在の日付 DATE_SUB(curdate(),INTERVAL 0 DAY) を選択します...
目次1. 実行コンテキストとは何か2. 実行コンテキスト スタックとは何ですか? 3. 実行コンテキ...
最近、多くの学生から Web ページのエンコーディングについて質問を受けています。gb2312 と ...
ディスプレイ定義IDテーブルに定義された自動増分IDが上限に達した場合、次のIDを申請する際に得られ...
この記事では、ページング効果を実現するためのjquery+Ajaxの具体的なコードを参考までに紹介し...
この記事の例では、衝突検出を実装するためのjsの具体的なコードを参考までに共有しています。具体的な内...
1. 公式ウェブサイトにアクセスして、jdk-8u162-linux-x64.tar.gzなどのLi...
1. 目的Flask アプリケーションをローカルで作成し、Docker でパッケージ化し、独自のサー...
序文このサービスは数か月前からMySQLに導入されています。私の仕事は基本的にターミナルで行われるた...
目次概要コンソールログコンソール.infoコンソール.警告コンソールエラーコンソールテーブルコンソー...
Unix ライクなシステムでは、コマンドまたはプロセスの実行がいつ開始されたか、またプロセスがどのく...
目次1. はじめに2. 本文2.1 フィールドの連結2.2 フィールドでの算術計算の実行1. はじめ...