[JavaScript知识库] vue的is属性实现动态渲染组件

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> vue的is属性实现动态渲染组件 -> 正文阅读

[JavaScript知识库]vue的is属性实现动态渲染组件

vue的is属性实现动态渲染组件: 官网链接

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