渲染一个“元组件”为动态组件。依 is 的值,来决定哪个组件被渲染。
<!--
* @Description:
* @Version: 0.1
* @Autor: wangmiao
* @Date: 2019-03-14 21:21:25
* @LastEditors: wangmiao
* @LastEditTime: 2021-06-05 17:44:45
-->
<template>
<div class="test">
<!-- <Test1/>
<Test2/> -->
<div v-for="item in resultList" :key="item.name">
<component :is="item.componentName"></component>
</div>
<button @click="hanledSort"> 排序 </button>
</div>
</template>
<script>
import Test1 from "./components/test1"
import Test2 from "./components/test2"
export default {
name: "",
components:{
Test1,
Test2
},
data() {
return {
sortFlag:false,
resultList:[
{ componentName:"Test2",
name:"组件2",
componentsId:2,
list:[]
},
{ componentName:"Test1",
name:"组件1",
componentsId:1,
list:[]
},
]
};
},
computed:{
},
created(){},
mounted(){
console.log(Test1)
},
methods: {
hanledSort(){
this.sortFlag = !this.sortFlag
if(this.sortFlag){
this.resultList.sort((a,b)=>a.componentsId - b.componentsId)
}else{
this.resultList.sort((a,b)=> b.componentsId - a.componentsId)
}
}
}
};
</script>
<style scoped lang="scss">
</style>
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Components Example</title>