526互联

Vue3 动态切换组件component

发布时间 2023-07-12 16:36:36作者: 海乐学习

在 vue3 开发中 经常会遇有 动态切换组件 的需求，下面简单写个例子，当然也还有其它方法。

用 component :is= 来变换组件
<div class="IndConK Huans overH" > 
　　<!-- 正常组件
   <ext-tel-status-component  ></ext-tel-status-component>     -->
   <!-- 动态组件 -->
   <component :is="currentTemplate"></component>
</div>
component :is="currentTemplate"  其中 currentTemplate 是当前组件的名称

组件文件的位置

引入组件 部分

<script>
    /* 引入 组件 */
    import ExtTelListComponent from '@/components/ExtTelListComponent.vue'
    /* 引入 组件 */
    import ExtTelStatusComponent from '@/components/ExtTelStatusComponent.vue'

  export default {
    name: 'MainIndex',
    components: {
         
        ExtTelListComponent,
        ExtTelStatusComponent,
 
    },
　　data() {
　　　　return { 

　　　　　　currentTemplate: "ExtTelStatusComponent" //当前组件
　　　　};
    },
　　mounted() { 
       //页面加载完成后 调用一次 显示默认组件
　　　　this.toggleTemplate('ExtTelStatusComponent'); 

　　},
　　methods: {

　　　　//切换 组件
　　　　toggleTemplate(activeTemplate) {
　　　　　　console.log("toggleTemplate() "+activeTemplate);
　　　　　　this.currentTemplate = activeTemplate;
　　　　},
   }

 

通过 toggleTemplate 这个函数 将组件名称 传入 赋给 变量 currentTemplate 从而改变组件

调用方式

<div class="menuUn Huans">
  <a href="javascript:;" class="menuUna flexC fl-bet Huans"  @click="toggleTemplate('ExtTelStatusComponent')"><p>显示组件A</p><span>[0/5]</span></a> 

  <a href="javascript:;" class="menuUna flexC fl-bet Huans" @click="toggleTemplate('ExtTelListComponent')"><p>显示组件B</p><span>[0/5]</span></a>


 </div>