I am trying to pass a function when a button is clicked, the button is clicked in a child element, then passed through a parent element to another child component, and i dont want to use the store for that, How can i do that?
components/footer/footer.vue — This is where the button is clicked
<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
–This is the parent component where that receives the click function and is to pass it into the 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 — I want the click function to perform an action inside this component
<script> export default { data() { return { showMenuBar: false } }, } </script>
Advertisement
Answer
You can declare any attribut on your parent component:
data() { return { toBeWatched: 0 }; }
- Then pass it like a props from the parent to the header child:
<app-header :Trigger="toBeWatched" />
- When you listen to the
@show-menu
event (comming from footer child), make any change on your attribut:
<app-footer @show-menu="toBeWatched++" />
- Finally you can watch for this change on your header child and trigger your function.
<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>