Vue3 实现点击菜单实现切换主界面组件

子组件

菜单组件 MenuComponent

列表组件 ExtTelListComponent

状态组件 ExtTelStatusComponent

父组件

界面主体 MainIndex

 实现功能：在 MainIndex 中引入 三个子组件  通过点击  菜单组件 切换加载  列表组件 和 状态组件

 实现效果

一、菜单组件 MenuComponent

<template>
    <ul class="menuU Huans">
        <li>
            <a href="javascript:;" class="menuUa flexC fl-bet Huans"><p>功能菜单</p><span>[0/5]</span></a>
                <div class="menuUn Huans">
                    <a href="javascript:;" class="menuUna flexC fl-bet Huans"  @click="menuOnClick('ExtTelStatusComponent')"><p>调度专区</p><span>[0/5]</span></a>
                    <a href="javascript:;" class="menuUna flexC fl-bet Huans"  @click="menuOnClick('ExtTelListComponent')"><p>分机列表</p><span>[0/5]</span></a>
               </div>
        </li>
    </ul>
</template>

 

<script>
 
export default {
  // 组件名称
  name: 'MenuComponent',
  setup (props,{emit}) {
        function menuOnClick(selected_name){
            
            console.log("menuOnClick() "+selected_name);
            //emit('MenuComponent_menuOnClick','ExtTelListComponent' );
            emit('MenuComponent_menuOnClick',selected_name); 
        }
        return {menuOnClick}
  },
 

其中  emit('MenuComponent_menuOnClick',selected_name);
MenuComponent_menuOnClick 为 要调用 父组件的 指定事件的名称
selected_name 为 要传给父组件的参数

 

二、父组件 MainIndex

父组件中写这个 menu-component 子组件的地方 加入  @MenuComponent_menuOnClick  事件并指向父组件的 toggleTemplate 函数

菜单组件 

<menu-component @MenuComponent_menuOnClick="toggleTemplate"></menu-component>

动态切换组件

<div class="IndConK Huans overH" >
   <!-- 动态组件 -->
   <component :is="currentTemplate"></component>
</div>

currentTemplate 为 父组件 MainIndex 的变量 用于存 当前组件的名称

<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 从而改变组件