Vue3 子组件 调用 父组件的函数

子组件  

<template>
    <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>
</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 为 要传给父组件的参数

 

父组件

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

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

toggleTemplate 函数

 methods: {

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

}

其中 activeTemplate 为子组件 传入的参数