Call parent method with component

Question

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> 

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