渲染一个“元组件”为动态组件。依 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>
<script src="https://unpkg.com/vue"></script>
<style>
.tab-button {
padding: 6px 10px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border: 1px solid #ccc;
cursor: pointer;
background: #f0f0f0;
margin-bottom: -1px;
margin-right: -1px;
}
.tab-button:hover {
background: #e0e0e0;
}
.tab-button.active {
background: #e0e0e0;
}
.tab {
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<div id="dynamic-component-demo" class="demo">
<button
v-for="tab in tabs"
v-bind:key="tab"
v-bind:class="['tab-button', { active: currentTab === tab }]"
v-on:click="currentTab = tab"
>
{{ tab }}
</button>
<component v-bind:is="currentTabComponent" class="tab"></component>
</div>
<script>
Vue.component("tab-home", {
template: "<div>Home component</div>"
});
Vue.component("tab-posts", {
template: "<div>Posts component</div>"
});
Vue.component("tab-archive", {
template: "<div>Archive component</div>"
});
new Vue({
el: "#dynamic-component-demo",
data: {
currentTab: "Home",
tabs: ["Home", "Posts", "Archive"]
},
computed: {
currentTabComponent: function() {
return "tab-" + this.currentTab.toLowerCase();
}
}
});
</script>
</body>
</html>