Estoy tratando de emitir un evento desde un componente Vue secundario a su elemento principal, estoy tratando de hacer esto con this.$emit('collapsemenu') .

Cuando intento obtener este evento del padre con v-on:collapsemenu="collapseMenuf($event)" no sucede nada. El método no se ejecuta, pero estoy seguro de que el evento secundario emite el evento.

¿Me estoy perdiendo algo importante aquí? He intentado buscar problemas similares en línea, pero nada ha funcionado hasta ahora.

Barra de navegación (niño)

 <template> <div class="navbar"> <div class="navbar-left"> <svg @click="collapse_menu" xmlns="http://www.w3.org/2000/svg" class="hamburger" viewBox="0 0 20 20" fill="currentColor" > <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" /> </svg> </div> <div class="navbar-right"></div> </div> </template> <script> export default { name: "Navbars", components: {}, methods: { collapse_menu() { console.log("clicked"); this.$emit("collapsemenu", "TRUE"); }, }, }; </script> <style lang="scss" scoped> .navbar { width: 100%; height: 70px; background: yellow; padding: 10px; &-left { width: 50%; } } .hamburger { cursor: pointer; height: 30px; } </style>

Principal

 <template> <div class="dashboard h-screen bg-red-200"> <Menu class="menu"></Menu> <div class="content"> <Navbar v-on:collapsemenu="collapseMenuf($event)"></Navbar> </div> <!-- <Content></Content> --> </div> </template> <script> import Navbar from "../../components/dashboard/navbar.vue"; import Menu from "../../components/dashboard/menu.vue"; export default { name: "Dash-main", components: { Navbar, Menu }, data() { return { collapse: false, }; }, methods: { collapseMenuf(value) { console.log("fsd"); this.collapse = value; console.log(value); }, }, }; </script> <style lang="scss" scoped> .dashboard { display: flex; width: 100%; } .content { width: 100%; } </style>