Vue js pass a function from child chile to another child component on a click event

user_6148320 0
Viewed 803

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>
nuxt.js vue.js javascript
2 Answers

Why are you worried about passing a function around?

When you emit the show-menu event simply toggle a piece of data in your parent component like this:

<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>

Then in your AppHeader simply take it in as a prop:

<script>
export default {
    props: {
      showMenuBar: { 
        type: Boolean, 
        default: false,
    },
}
</script>
user_48267400

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>
user_140474170
Related