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.
someMethod
will be run whencustom-element
is clicked. Is that what you want or is there some other scenario?