¡Sí!

Es posible llamar a un método padre desde un hijo y es muy fácil.

Cada componente de Vue define la propiedad $parent . Desde esta propiedad, puede llamar a cualquier método que exista en el padre.

Aquí hay un JSFiddle que lo hace: 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>

Nota : Si bien no se recomienda hacer este tipo de cosas cuando está creando componentes reutilizables desconectados, a veces estamos creando componentes no reutilizables relacionados y, en este caso, es muy útil.

Directamente desde la documentación de Vue.js:

En Vue, la relación del componente padre-hijo se puede resumir como apoyos hacia abajo, eventos hacia arriba. El padre pasa datos al hijo a través de accesorios, y el niño envía mensajes al padre a través de eventos...

Por lo tanto, debe emitir un evento de click desde su componente secundario cuando sucede algo, que luego se puede usar para llamar a un método en su plantilla principal.

Si no desea emitir explícitamente un evento desde el elemento secundario (usando this.$emit('click') de su componente secundario), también puede intentar usar un evento de clic nativo , @click.native="someMethod" .

Confiar en llamar a this.$parent oculta la dependencia y se romperá cuando use bibliotecas de componentes que crean una jerarquía secundaria más larga

Los métodos preferidos son:

1. Pasar explícitamente métodos como propiedades a componentes secundarios (lo mismo que pasar accesorios de datos)
2. O declarar métodos globales como mixins

De la respuesta de nils en el método principal de la llamada de herencia Vue.js :

1. Pasando accesorios (padre-hijo)

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

   y en la plantilla de SomeComponentA:

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

2. usar mezclas

   Si esta es una funcionalidad común que desea usar en otros lugares, usar un mixin podría ser más idiomático:

    var mixin = { methods: { someFunction: function() { // ... } } }; var SomeComponentA = Vue.extend({ mixins: [ mixin ], methods: { } }); var SomeComponentB = Vue.extend({ methods: { someFunctionExtended: function () { // Do your stuff this.someFunction(); } } });

Otras lecturas

• Vue.js: hacer que las funciones auxiliares estén disponibles globalmente para componentes de un solo archivo
• Mezclas de Vue Docs