開発プロセスでは、ほとんどの場合、動的コンポーネントが使用されると思います。異なるコンポーネント間で状態を切り替える必要がある場合、動的コンポーネントはニーズを非常にうまく満たすことができます。その中核となるのは、コンポーネント タグと 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入力ボックスの最適化により、ユーザーエクスペリエンスと使いやすさが向上します。
グループを作成グループ化は、SELECT ステートメントの GROUP BY 句で設定されます。例:...
目次序文: 1. イベント ループとタスク キューの理由: 2. イベントループメカニズム: 3. ...
目次1 マスター・スレーブの読み取り・書き込み分離1.1 コア2 マスタースレーブレプリケーション2...
一時テーブルとメモリテーブルメモリ テーブルとは、メモリ エンジンを使用するテーブルを指します。テー...
まず、簡単な Docker インストールを実行します。イメージをカスタマイズするには、ベースイメージ...
目次アプリ更新プロセス大まかなフローチャートアプリ情報の更新1. まず取得する必要があるファイルアド...
MySQL データベースにとって binlog バイナリ ログがどれほど重要であるかについては詳し...
Mac 用 MySQL をダウンロード: https://downloads.mysql.com/a...
Linux コンピュータには 2 つの時間があります。1 つはハードウェア時間 (BIOS に記録さ...
この記事では、VMware Workstation 14 Proのインストールとアクティベーションに...
目次導入スクロール要素.スクロール()要素.scrollHeight/scrollWidth要素.s...
構造とパフォーマンスの紹介HTML 構造、CSS 表現、JavaScript 動作。Web ページの...
ページの自動スクロール効果は JavaScript で実現できますが、今日偶然、JS 制御なしでさま...
この記事では、タブ切り替え機能を実装するためのJavaScriptの具体的なコードを参考までに共有し...
1. インストールパッケージを使用してMySQLをインストールします(オンラインダウンロードは遅すぎ...