この記事では主にVueにおけるコンポーネントの切り替えとキャッシュソリューションについて紹介します 1. コンポーネント切り替え方式方法1: v-ifとv-elseを使用する// 変数フラグが true の場合、comp-a コンポーネントが表示され、そうでない場合は comp-b コンポーネントが表示されます <comp-a v-if="flag"></comp-a> <comp-b v-else></comp-b> 方法 2: 組み込みコンポーネントを使用する: <component></component>// クリックするとログイン、登録、終了コンポーネントが切り替わります <template> <div> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click.prevent="comName = 'login'">ログイン</a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click.prevent="comName = 'register'">登録</a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click.prevent="comName = 'logOut'">ログアウト</a> // <component></component> は対応する名前のコンポーネントを表示します。これはプレースホルダーに相当します // :is 属性はコンポーネント名を指定します <component :is="comName"></component> </div> </テンプレート> 方法3: vue-router// ルーティングルール: { パス: '/login', 名前: 'ログイン', コンポーネント: () => import('../views/login.vue') }, { パス: '/register', 名前: 'レジスタ', コンポーネント: () => import('../views/register.vue') }, //コンポーネントを表示する場所: <ルータービュー /> 2. コンポーネントのキャッシュ: キープアライブこの記事の冒頭の実際のシナリオのように、コンポーネントを破棄して再構築するのではなく、必要に応じてコンポーネントをキャッシュします。 1.キープアライブの定義
<keep-alive> は抽象コンポーネントです。DOM要素自体はレンダリングされず、親コンポーネント チェーンにも表示されません。 2.キープアライブライフサイクル活性化された
無効化 このフックは
キャッシュが設定されているコンポーネント:
3. キープアライブの使い方1. 小道具
2. <component></component> で使用する<テンプレート> <div> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click.prevent="comName = 'login'">ログイン</a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click.prevent="comName = 'register'">登録</a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click.prevent="comName = 'logOut'">ログアウト</a> // ログイン コンポーネントがキャッシュされます。include が設定されていない場合、<component></component> にマウントされているすべてのコンポーネントがデフォルトでキャッシュされます。// 指定された複数のコンポーネントをキャッシュします include = ['login', 'register'] <キープアライブを含める="ログイン"> <コンポーネント:is="comName"></コンポーネント> </キープアライブ> </div> </テンプレート> 3. <router-view /> ルーティングで使用するルーティング { パス: '/login', 名前: 'ログイン', コンポーネント: () => import('../views/login.vue') メタ:{ keepAlive : true // ログインコンポーネントはキャッシュされます} }, { パス: '/register', 名前: 'レジスタ', コンポーネント: () => import('../views/register.vue'), メタ:{ keepAlive : false // レジスタコンポーネントはキャッシュされません} }, <ルータービュー />: <div id="アプリ"> <キープアライブ> <!-- キャッシュする必要があるコンポーネントを表示します--> <router-view v-if="$route.meta.keepAlive"> </router-view> </キープアライブ> <!-- キャッシュを必要としないコンポーネントを表示します --> <router-view v-if="!$route.meta.keepAlive"> </router-view> </div> 4. キャッシュコンポーネントをクリアする// beforeRouteLeave() フック // 詳細ページに移動するかどうかを決定する beforeRouteLeave(to, from, next) { to.path === "/goods_detail"の場合{ メタキープアライブ = true; } それ以外 { from.meta.keepAlive = false; // this.$destroy() } 次(); } これで、vue コンポーネントの切り替え、動的コンポーネント、コンポーネントのキャッシュに関するこの記事は終了です。vue コンポーネントの切り替え、動的コンポーネント、コンポーネントのキャッシュに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: ウェブ画像形式としてPNG、JPG、GIFを選択して使用する方法
MACはmysql8.0をインストールします。具体的な内容は次のとおりです。 1. ダウンロードアド...
MySQL 8 の公式バージョン 8.0.11 がリリースされました。公式発表によると、MySQL ...
1. はじめにMYSQL の MDL ロックは常に頭痛の種でした。ロックについて話すとき、通常は I...
私は通常、Tomcatや他のアプリケーションのリバースプロキシとしてnginxを使用しています。実際...
Vue でタブ切り替えを実装する 3 つの方法1. v-showはコンテンツの切り替えを制御します1...
<br />関連記事: ハイパーリンクを表示して開く方法症状<br />ユー...
最近、フロントエンドの vue.js ドッキング機能モジュールに取り組んでいたとき、画像をダウンロー...
目次概要コードの実装シングルトンパターンの簡易版改良版プロキシバージョンシングルトンモード遅延シング...
HTML で下線を引くには、以前はテキストを <u></u> タグで囲む必要...
Vue コンポーネントをカプセル化する場合でも、機能コンポーネントをクロスファンクショナルに使用しま...
1.まずMysqlリンク設定ページを書く パッケージ com.wretchant.fredis.me...
まとめHTML: 要素と v-cloak CSS: [v-cloak]{表示: なし}プロセスページ...
モバイル デバイス向けに開発する場合、Retina 画面上で要素の境界線が太くなるという問題に遭遇す...
この記事では、パスワードボックスの検証情報を実装するためのJavaScriptの具体的なコードを例と...
目次Refsとは何か1. 文字列型参照2. コールバック参照React.createRef() 4....