vueの属性はコンポーネントの動的レンダリングを実現します:公式ウェブサイトリンク
// html
<div class="form-container">
<component :is="currentViewComponent" ref="customerInfoDom"></component>
</div>
// 导入
import CustomerInfoForm from "@/view/dealWork/components/CustomerInfoForm.vue";
import ContactList from "@/view/contact/components/ContactList.vue";
import DeviceList from "@/view/dealWork/flow/DeviceList.vue";
import Process from '@/view/dealWork/components/Process';
import ProcessFlow from '@/view/dealWork/components/ProcessFlow';
// 监听
watch: {
active: {
handler: 'handleDynamicComponents',
immediate: true
}
},
// 方法:
methods: {
// 当前展示组件
handleDynamicComponents (val) {
localStorage.setItem('VAMCMOBILE', JSON.stringify({
stepsActive: val}));
switch (val) {
case 0:
this.currentViewComponent = CustomerInfoForm;
break;
case 1:
this.currentViewComponent = ContactList;
break;
case 2:
this.currentViewComponent = ProcessingFlowMap.get(WORK_INFO.type);
break;
default:
break;
}
},
}