动态组件顾名思义动态加载不同的组件，is属性用于加载不同组件，传参使用属性传递

1、使用v-for遍历component，组件都会执行

  <componentv-for="(item, index) in TAB_PANE":key="index":is="item.componentName":systemSettingSelect="systemSettingSelect"@handleAAA="onHandleAAA"></component>

2、可以将component组件放在v-for循环外，使用外部方法调用，每次只传递一次 component的is值，且只渲染一次。

<component :is="curComponent"></component>data() {return {curComponent: '',}
}<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>