Call parent method with component

user_2036108 0
Viewed 147426

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

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

user_13660330

You can use $root like this with vanilla Vue, but, If you use nuxt with vue that response won't work. Why? because $root is nuxt itself. Let me show you an example:

this.$root.$children[1].myRootMethod()

  • $root: As I said before, this is nuxt.

  • $children[0]: this is nuxtloading.

  • $children[1]: this is your main component, in my case, it was a basic layout with a few global components and a global mixin.

  • $children[n]: other components on your app.

Hope it helps.

user_33770460

In current vue version, this solution:
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();
       }
   }
});

The HTML part:

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

Base on this post, should be modified in this way:

<some-component-b v-bind:someFunctionParent="someFunction"></some-component-b>
user_81861370
Related