vueのis属性は、コンポーネントの動的レンダリングを実現します

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;
      }
    },
}

ここに画像の説明を挿入

おすすめ

転載: blog.csdn.net/weixin_43131046/article/details/124353730