Call parent method with component

Profile picture for user2036108
user2036108

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>

Relying on calling this.$parent hides the dependency and will break when you use component libraries which create a longer child hierarchy

The prefered methods are to either:

  1. Explicitly pass methods as properties to child components (the same as passing data props)
  2. Or declare global methods as mixins

From nils's answer on Vue.js inheritance call parent method:

  1. Passing props (parent-child)

    var SomeComponentA = Vue.extend({
    methods: {
        someFunction: function () {
            // ClassA some stuff
        }
    }
});

var SomeComponentB = Vue.extend({
   props: [ 'someFunctionParent' ],
   methods: {
       someFunction: function () {
           // Do your stuff
           this.someFunctionParent();
       }
   }
});

    and in the template of SomeComponentA:

    <some-component-b :someFunctionParent="someFunction"></some-component-b>

  2. Use Mixins

    If this is common functionality that you want to use in other places, using a mixin might be more idiomatic:

    var mixin = {
    methods: {
        someFunction: function() {
            // ...
        }
    }
};
var SomeComponentA = Vue.extend({
    mixins: [ mixin ],
    methods: {
    }
});

var SomeComponentB = Vue.extend({
   methods: {
       someFunctionExtended: function () {
           // Do your stuff
           this.someFunction();
       }
   }
});

Further Reading