1、动态组件顾名思义动态加载不同的组件,is属性用于加载不同组件,传参使用属性传递
<component :is="curComponent"></component>
data() {
return {
curComponent: '',
}
}
2、代码示例:
<template>
<button @click="change('1')">组件1</button>
<button @click="change('2')">组件2</button>
<div style="width: calc(100% - 220px)">
<keep-alive>
<component
:treeData="treeDataCur"
:is="curComponent"
></component>
</keep-alive>
</div>
</template>
<script>
import component1 from './component1'
import component2 from './component2'
export default {
components: {component1, component2},
data() {
return {
curComponent: '',
}
},
methods: {
change(index) {
this.curComponent= 'component' + index
},
}
}
</script>
<style scoped>
</style>