1. コンポーネント動的コンポーネントレンダリングを実装する方法
このタグはプレースホルダーと同等であり、バインドされたコンポーネントを指定するにはis属性を使用する必要があります。 <button @click="comName = 'Left'">左を表示</button> <button @click="comName = 'Right'">右を表示</button> <div class="box"> <!-- 左コンポーネントと右コンポーネントをレンダリングします--> <!-- コンポーネントは Vue に組み込まれています --> <!-- はレンダリングされるコンポーネントの名前を示します--> <コンポーネント:is="comName"></コンポーネント> </div> <スクリプト> '@/compeonents/Left.vue' から Left をインポートします。 '@/components/Right.vue' から Right をインポートします。 エクスポートデフォルト{ コンポーネント: 左、 右 }, データ() { 戻る { //comNameは表示されるコンポーネントの名前を示します。comName: Left、 } } } </スクリプト> 2. キープアライブ2.1 問題点ボタンプラスワン機能が 以下は <div class="left-container"> <h3>左コンポーネント----{{ count }}</h3> <button @click="count += 1">+1</button> </div> <スクリプト> エクスポートデフォルト{ データ(){ 戻る { カウント: 0 } } } </スクリプト> 追加後、 以下は エクスポートデフォルト{ 作成された() { console.log('左のコンポーネントが作成されました!') }, 破壊された(){ console.log('左のコンポーネントが破壊されました~') } } 再度アピール操作を実行すると、結果は次のようになります。 問題:コンポーネントを切り替えると、コンポーネントは同時に破棄および作成されるため、同じコンポーネントに切り替えるたびに、取得するコンポーネントオブジェクトは同じではなく、初期化データが上書きされます。 2.2 キープアライブを使って解決する
アプリのルート コンポーネントを次のように変更します。 <キープアライブ> <!-- keep-alive は内部コンポーネントを破棄せずにキャッシュできます --> <コンポーネント:is="comName"></コンポーネント> </キープアライブ> 2.3キープアライブライフサイクルこのライフサイクルは、コンポーネントが コンポーネントがキャッシュされると、 コンポーネントがアクティブ化されると、 //コンポーネントが初めて作成されると、まずcreatedがトリガーされ、次にactivatedが実行されます //コンポーネントがアクティブ化されると、アクティブ化されたものだけがトリガーされ、作成されません アクティブ化() { console.log('コンポーネントがアクティブ化されました、アクティブ化されました') }, 非アクティブ化(){ console.log('コンポーネントはキャッシュされ、非アクティブ化されています') } 2.4keep-alive include、exclude プロパティデフォルトでは、 キャッシュする必要があるコンポーネントを指定する方法: <キープアライブを含める="Left,MyRight"> <コンポーネント:is="comName"></コンポーネント> </キープアライブ>
左のコンポーネントの場合: デフォルトをエクスポートする{} 右側のコンポーネントの場合: エクスポートデフォルト{ //name属性が指定されている場合、コンポーネントの名前はname属性の値になります。name: 'MyRight' }
コンポーネントの外側: Left '@/components/Left.vue' をインポートします。 コンポーネント: 左、 } ここで登録された名前は、コンポーネントを参照するためにのみ使用されます。コンポーネントに コンポーネント内部: エクスポートデフォルト{ //name属性が指定されている場合、コンポーネントの名前はname属性の値になります。name: 'MyRight' } コンポーネント内に これで、vue 動的コンポーネントに関するこの記事は終了です。vue 動的コンポーネントに関するその他の関連コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQL における TIMESTAMPDIFF ケースの詳細な説明
Windows リモート デスクトップを使用してサーバーに接続したことがある人なら、リモート デスク...
目次Nginx 負荷分散構成Nginx 負荷分散戦略ポーリング(デフォルト)重さip_ハッシュ公正(...
1. コントロールパネルで、MySQLのすべてのコンポーネントをアンインストールします。コントロール...
この記事では、CentOS 7 で高可用性 Hadoop 2.10 クラスターを構築する方法を紹介し...
1.ハードディスクを追加する2. パーティションの状態を確認します: fdisk -l 3. パーテ...
プリミティブ値 -> プリミティブ型Number String Boolean undefin...
CSS3 はアニメーションを作成でき、多くの Web ページのアニメーション画像、Flash アニメ...
UPD 2020.2.26 現在、Ubuntu 20.04 LTSはまだリリースされていないため、チ...
目次序文仮想リストとは何ですか?デモ効果準備スクリーンの高さとボックスの高さ最適化要約する序文人気の...
A: 通常はクライアントに保存されます。 jwt または JSON Web Token は、リクエス...
目次1. スロットを使用する理由1.1 スロット1.2 コンポーネントのスロット1.3 例2. この...
私が学習していたときに使用していたバージョンは比較的新しいものであり、インターネット上のチュートリア...
HTML5 では、ヘッダー、フッター、ナビゲーションなどのセマンティック タグが追加されているため...
目次インストール環境の説明MySQLデータベースサービスをインストールするメインライブラリを構成する...
マウスイベントマウスが特定の操作を実行すると、イベント オブジェクトが生成され、イベントがトリガーさ...