Call parent method with component

Solution 1:

Yes!

It's possible to call a parent method from a child and it's very easy.

Each Vue component define the property $parent. From this property you can then call any method that exist in the parent.

Here is a JSFiddle that does it : https://jsfiddle.net/50qt9ce3/1/

<script src="https://unpkg.com/vue"></script>

<template id="child-template">
    <span @click="someMethod">Click me!</span>
</template>

<div id="app">
  <child></child>
</div>

<script>
Vue.component('child', {
  template: '#child-template',
  methods: {
    someMethod(){
        this.$parent.someMethod();
    }
    }
});

var app = new Vue({
    el: '#app',
  methods: {
    someMethod(){
        alert('parent');
    }
    }
});
</script>

Note: While it's not recommended to do this kind of thing when you are building disconnected reusable components, sometimes we are building related non-reusable component and in this case it's very handy.

Solution 2:

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