vue 動的コンポーネント

<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、

			}

		}

	}

</スクリプト> 

<div class="left-container">

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

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

</div>

<スクリプト>

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

		データ（）{

			戻る {

				カウント: 0

			}

		}

	}

</スクリプト>

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

	作成された() {

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

	},

	破壊された(){

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

	}

}

<キープアライブ>

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

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

</キープアライブ> 

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

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

アクティブ化() {

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

},

非アクティブ化(){

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

} 

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

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

</キープアライブ>

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

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

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

}

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

コンポーネント:

	左、

}

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

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

}