Question

130

Call parent method with component

rated 0 times [ 133] [ 3] / answers: 1 / hits: 165473 / 7 Years ago, thu, september 14, 2017, 12:00:00

I have a component and want to add a click listener that runs a method in the parent template in Vue. Is this possible?

<template>

    <custom-element @click=someMethod></custom-element>

</template>



<script>

    export default {

        name: 'template',

        methods: {

            someMethod: function() {

                console.log(true);

        }

    }

</script>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jacklynr

Add To Favorites

Follow

Total Points: 542

Total Questions: 120

Total Answers: 95

Location: Cape Verde

Member since Fri, Nov 27, 2020

4 Years ago

answered 7 Years ago raveno · Accepted Answer

Directly from the Vue.js documentation:

In Vue, the parent-child component relationship can be summarized as props down, events up. The parent passes data down to the child via props, and the child sends messages to the parent via events...

So you need to emit a click event from your child component when something happens, which can then be used to call a method in your parent template.

If you don't want to explicitly emit an event from the child (using this.$emit('click') from your child component), you can also try to use a native click event, @click.native="someMethod".