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 をよろしくお願いいたします。

以下もご興味があるかもしれません: