vue 動的コンポーネント

vue 動的コンポーネント

1. コンポーネント

動的コンポーネントレンダリングを実装する方法

vueは、動的コンポーネントをレンダリングするために特別に使用される組み込みの<component>が用意されています。

このタグはプレースホルダーと同等であり、バインドされたコンポーネントを指定するには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 問題点

ボタンプラスワン機能がLeftコンポーネントに実装されている場合、コンポーネントはプラスワン操作後に切り替えられ、その後元に戻る。

以下はLeftに追加された機能です

<div class="left-container">

	<h3>左コンポーネント----{{ count }}</h3>

	<button @click="count += 1">+1</button>

</div>

<スクリプト>

	エクスポートデフォルト{

		データ(){

			戻る {

				カウント: 0

			}

		}

	}

</スクリプト>

追加後、 rightコンポーネントに切り替えて、元に戻します。コンポーネント内のデータが書き換えられ、初期化されていることがわかります。

Vueのライフサイクルを使用してLeftコンポーネントを表示する

以下はLeftに追加されたライフサイクル機能です

エクスポートデフォルト{

	作成された() {

		console.log('左のコンポーネントが作成されました!')

	},

	破壊された(){

		console.log('左のコンポーネントが破壊されました~')

	}

}

再度アピール操作を実行すると、結果は次のようになります。

問題:コンポーネントを切り替えると、コンポーネントは同時に破棄および作成されるため、同じコンポーネントに切り替えるたびに、取得するコンポーネントオブジェクトは同じではなく、初期化データが上書きされます。

2.2 キープアライブを使って解決する

keep-aliveコンポーネントもVueの組み込みコンポーネントであり、直接使用することができます。

アプリのルート コンポーネントを次のように変更します。

<キープアライブ>

	<!-- keep-alive は内部コンポーネントを破棄せずにキャッシュできます -->

	<コンポーネント:is="comName"></コンポーネント>

</キープアライブ> 

2.3キープアライブライフサイクル

このライフサイクルは、コンポーネントがkeep-aliveを使用する場合にのみ使用できます。

コンポーネントがキャッシュされると、 deactivatedが自動的にトリガーされます。

コンポーネントがアクティブ化されると、 activedが自動的にトリガーされます。

Leftコンポーネントに次の変更を追加します

//コンポーネントが初めて作成されると、まずcreatedがトリガーされ、次にactivatedが実行されます

//コンポーネントがアクティブ化されると、アクティブ化されたものだけがトリガーされ、作成されません

アクティブ化() {

	console.log('コンポーネントがアクティブ化されました、アクティブ化されました')

},

非アクティブ化(){

	console.log('コンポーネントはキャッシュされ、非アクティブ化されています')

} 

2.4keep-alive include、exclude プロパティ

デフォルトでは、 keep-alive keep-aliveによってラップされたcomponent内のすべてのコンポーネントをキャッシュします。

キャッシュする必要があるコンポーネントを指定する方法:

include / exclude属性を使用します。同時に使用することはできません。

<キープアライブを含める="Left,MyRight">

	<コンポーネント:is="comName"></コンポーネント>

</キープアライブ>

上記はキャッシュする必要があるコンポーネントの名前を指定します。ここでコンポーネントの名前に注意してください。

左のコンポーネントの場合:

デフォルトをエクスポートする{}

右側のコンポーネントの場合:

エクスポートデフォルト{

	//name属性が指定されている場合、コンポーネントの名前はname属性の値になります。name: 'MyRight'

}

区別:コンポーネント内の名前属性とコンポーネント外の登録名の関係


コンポーネントの外側:

Left '@/components/Left.vue' をインポートします。

コンポーネント:

	左、

}

ここで登録された名前は、コンポーネントを参照するためにのみ使用されます。コンポーネントにname属性がない場合、 nameデフォルトで登録された名前になります。

コンポーネント内部:

エクスポートデフォルト{

	//name属性が指定されている場合、コンポーネントの名前はname属性の値になります。name: 'MyRight'

}

コンポーネント内にname属性が宣言されています。この名前はデバッグツールに表示されるラベルで使用され、ラベル内のキャッシュ機能でも使用されます。

これで、vue 動的コンポーネントに関するこの記事は終了です。vue 動的コンポーネントに関するその他の関連コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue 組み込みコンポーネント - is 属性を通じてコン​​ポーネント操作を動的にレンダリングします
  • Vue.component プロパティの説明
  • VueとVueComponentの関係の詳細な説明
  • Vueコンポーネントの動的コンポーネントの詳細な説明
  • Vueのコンポーネントタグレンダリング問題を解決する

<<:  MySQL における TIMESTAMPDIFF ケースの詳細な説明

>>:  HTML フォームとフォーム内部タグの使用

推薦する

Windows はリモート デスクトップが長時間自動的に切断されるのを防ぎます

Windows リモート デスクトップを使用してサーバーに接続したことがある人なら、リモート デスク...

Nginx ロードバランシングの設定方法

目次Nginx 負荷分散構成Nginx 負荷分散戦略ポーリング(デフォルト)重さip_ハッシュ公正(...

WindowsシステムでMySQLデータベースを完全にアンインストールして、MySQLを再インストールします

1. コントロールパネルで、MySQLのすべてのコンポーネントをアンインストールします。コントロール...

CentOS 7 は Hadoop 2.10 の高可用性 (HA) をビルドします

この記事では、CentOS 7 で高可用性 Hadoop 2.10 クラスターを構築する方法を紹介し...

LinuxでLVMディスクを拡張する詳細な手順

1.ハードディスクを追加する2. パーティションの状態を確認します: fdisk -l 3. パーテ...

JS の原価と基準価額の問題に関する簡単な分析

プリミティブ値 -> プリミティブ型Number String Boolean undefin...

CSS3 アニメーション ボールローリング JS コントロールアニメーション一時停止

CSS3 はアニメーションを作成でき、多くの Web ページのアニメーション画像、Flash アニメ...

Ubuntu 20.04 aptの国内ソースを変更する方法

UPD 2020.2.26 現在、Ubuntu 20.04 LTSはまだリリースされていないため、チ...

WeChatアプレット仮想リストの応用例

目次序文仮想リストとは何ですか?デモ効果準備スクリーンの高さとボックスの高さ最適化要約する序文人気の...

jwtを使用してノードによって生成されたトークンをどこに保存するかについての簡単な説明

A: 通常はクライアントに保存されます。 jwt または JSON Web Token は、リクエス...

Vueスロットの使用の詳細

目次1. スロットを使用する理由1.1 スロット1.2 コンポーネントのスロット1.3 例2. この...

IDEA2021 tomcat10 サーブレットの新しいバージョンの落とし穴

私が学習していたときに使用していたバージョンは比較的新しいものであり、インターネット上のチュートリア...

セマンティックタグを使用して、IE6、7、8と互換性のあるHTMLを記述します。

HTML5 では、ヘッダー、フッター、ナビゲーションなどのセマンティック タグが追加されているため...

MySQLデータベースのマスタースレーブ同期の実際のプロセスの詳細な説明

目次インストール環境の説明MySQLデータベースサービスをインストールするメインライブラリを構成する...

JavaScript マウスイベントのケーススタディ

マウスイベントマウスが特定の操作を実行すると、イベント オブジェクトが生成され、イベントがトリガーさ...