动态组件、异步组件

1、动态组件
父组件

<template>
	<div class="no_study_report">
		<component :is="testDemoVmodelComponent" />
	</div>
</template>

<script>
import testDemoVmodel from "@/components/testDemoVmodel";
export default {
	name: "noStudyReport",
	components: {
		testDemoVmodel,
	},
	data() {
		return {
			testDemoVmodelComponent: "testDemoVmodel",
		};
	},
};
</script>

<style scoped lang="scss">
.no_study_report {
	font-size: 30px;
}
</style>
子组件

```javascript
<template>
	<input type="text" />
</template>
<script>
export default {};
</script>

<style scoped lang="scss"></style>

2、异步组件
1、import()函数;
2、按需加载，异步加载大组件。
父组件
```javascript
<template>
	<div class="no_study_report">
		<testDemoVmodel v-if="modelBool"></testDemoVmodel>
		<button @click="handleShowComponent">显示动态组件</button>
	</div>
</template>

<script>
export default {
	name: "noStudyReport",
	components: {
		testDemoVmodel: () => import("@/components/testDemoVmodel"),
	},
	data() {
		return {
			modelBool: false,
			testDemoVmodelComponent: "testDemoVmodel",
		};
	},
	methods: {
		handleShowComponent() {
			this.modelBool = true;
		},
	},
};
</script>

<style scoped lang="scss">
.no_study_report {
	font-size: 30px;
}
</style>

子组件

<template>
	<div class="model_text">
		<input type="text" />
		我是动态组件
	</div>
</template>
<script>
export default {};
</script>

<style scoped lang="scss"></style>

我们刷新页面后没有看到子组件的代码，只有在点击显示动态组件按钮后就好异步加载出来