Estoy tratando de pasar una función cuando se hace clic en un botón, se hace clic en el botón en un elemento secundario, luego se pasa a través de un elemento principal a otro componente secundario, y no quiero usar la tienda para eso. ¿Cómo puedo hacer eso?
components/footer/footer.vue: aquí es donde se hace clic en el botón
<template> <div class="footer-bottom-header-menu-bar mob" @click="showMenu"> <img src="~/assets/svg/menubar.svg" alt="+" /> </div> </template> <script> export default { methods: { showMenu() { this.$emit("show-menu"); } } } </script> layouts/default.vue: este es el componente principal donde recibe la función de clic y debe pasarla al app-header
<template> <div> <app-header /> <Nuxt /> <app-footer @show-menu="showMenu()"/> </div> </template> <script> import header from "~/components/header/header"; import footer from "~/components/footer/footer"; export default { components: { 'app-header': header, 'app-footer': footer }, methods: { showMenu() { console.log("clicked"); } } } </script>components/header/header.vue -- Quiero que la función de clic realice una acción dentro de este componente
<script> export default { data() { return { showMenuBar: false } }, } </script>¿Por qué te preocupa pasar una función?
Cuando emit el evento show-menu , simplemente alterne un dato en su componente principal como este:
<template> <div> <app-header :showMenuBar="showMenuBar" /> <Nuxt /> <app-footer @show-menu="showMenu"/> </div> </template> <script> import header from "~/components/header/header"; import footer from "~/components/footer/footer"; export default { components: { 'app-header': header, 'app-footer': footer }, data() { return { showMenuBar: false; }; }, methods: { showMenu() { // I would make this more dynamic than always // hardcoding it to true, but you get the idea this.showMenuBar = true; } } } </script> Luego, en su AppHeader simplemente tómelo como accesorio:
<script> export default { props: { showMenuBar: { type: Boolean, default: false, }, } </script>Puede declarar cualquier atributo en su componente principal:
data() { return { toBeWatched: 0 }; }<app-header :Trigger="toBeWatched" />@show-menu (procedente del pie de página secundario), realice cualquier cambio en su atributo:<app-footer @show-menu="toBeWatched++" /> <script> export default { data() { return { showMenuBar: false }; }, props: ['Trigger'], watch: { Trigger() { this.showMenuBar = !this.showMenuBar; // or do whatever you want console.log('showMenuBar : ' + this.showMenuBar); } } }; </script>