动态组件和异步组件

动态组件的用法 ： :is= "属性名"

// is 必须是动态属性
component标签: < component :is=“NextTickName” />

动态组件怎么用呢？

根据原始数据动态渲染的场景，组件类型不确定的情况下。 比如说新闻落地页。

<!--<component  :is="NextTickName"/>-->
<div v-for="(val,key) in newsData" :key="key">
	<component :is="val.type"/>
</div>
<script>
 import NextTick from "./NextTick"
 export default {
  	components:{
		NextTick
	},
	data(){
		return{
			name:"哈哈哈",
			//NextTickName:"NextTick"
			//-- NextTick它是组件的名字 -- 
			newsData:{
				1:{
					type:"txet"
				},
				2:{
					type:"txet"
				}
				3:{
					type:"txet"
				}
			}
		}
	}
 }
</script>

---

异步组件:

在引入的组件内容过大的时候就可以用到异步组件，可以说它是按需加载，当用到的时候再去加载,而不是一次性去加载完成。

用法：

<FormDemo/>

<script>
	// import FormDemo from "./FormDemo";
	export default {
		compontents:{
			//它和上面的用法本质一样的，但是下面的是异步组件，也就是按需加载
			FormDemo:() => import("./FormDemo")
		}
	}
</script>