Appelez la méthode parent avec le composant

Question

J'ai un composant et je souhaite ajouter un écouteur de clics qui exécute une méthode dans le modèle parent dans Vue. Est-ce possible?

 <template>
    <custom-element @click="someMethod"></custom-element>
</template>

<script>
    export default {
        name: 'template',
        methods: {
            someMethod: function() {
                console.log(true);
        }
    }
</script>
 

Answer 1

Oui!

Il est possible d'appeler une méthode parent d'un enfant et c'est très facile.

Chaque Vue composant définir la propriété $parent. À partir de cette propriété, vous pouvez appeler n'importe quelle méthode qui existent dans le parent.

Voici un JSFiddle qui fait : 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>

Remarque: bien qu'il n'est pas recommandé de faire ce genre de chose quand vous construisez déconnecté de composants réutilisables, parfois nous sommes associés au bâtiment non-composant réutilisable et dans ce cas, il est très pratique.

Answer 2

Directement à partir de la Vue.js documentation:

En Vue, la relation parent-enfant, relation composant peuvent être résumées comme des accessoires de down, les événements jusqu'. La mère transmet des données vers le bas à l'enfant via les accessoires, et l'enfant envoie des messages à la société mère par les événements...

Si vous avez besoin d'émettre une click événement de votre enfant composant lorsque quelque chose se passe, qui peut ensuite être utilisé pour appeler une méthode dans votre modèle parent.

Si vous ne voulez pas explicitement émettent un événement de l'enfant (à l'aide d' this.$emit('click') de votre composant enfant), vous pouvez également essayer d'utiliser un natif cliquez sur l'événement, @click.native="someMethod".

Answer 3

La préférence des méthodes, soit:

1. Explicitement passer des méthodes comme les propriétés de composants enfants (la même que la transmission des données accessoires)
2. Ou déclarer les méthodes globales comme mixin

En s'appuyant sur l'appel de this.$parent cache la dépendance et pause quand vous utilisez des bibliothèques de composants qui créent une hiérarchie enfant plus

De nils sa réponse sur Vue.js l'héritage appel de méthode parent

1. En passant accessoires (parent-enfant)

var SomeComponentA = Vue.extend({
    methods: {
        someFunction: function () {
            // ClassA some stuff
        }
    }
});

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

et dans le modèle de SomeComponentA:

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

2. Mixin

Si c'est la commune de la fonctionnalité que vous souhaitez utiliser dans d'autres endroits, à l'aide d'un mixin pourraient être plus idiomatiques:

var mixin = {
    methods: {
        someFunction: function() {
            // ...
        }
    }
};

var SomeComponentA = Vue.extend({
    mixins: [ mixin ],
    methods: {
    }
});

var SomeComponentB = Vue.extend({
   methods: {
       someFunctionExtended: function () {
           // Do your stuff
           this.someFunction();
       }
   }
});

Lectures Complémentaires:

• Vue.js la Prise de fonctions d'assistance à l'échelle mondiale à un seul fichier de composants
• Vue Docs Mixin

Answer 4

Vous pouvez soit transmettre la méthode parent au composant enfant via props soit obtenir que le composant enfant émette un événement personnalisé ou natif.

Voici un Plunker pour démontrer les deux approches.

Answer 5

Dans la version actuelle de vue, cette solution:
Passer les accessoires (parent-enfant)

 var SomeComponentA = Vue.extend({
    methods: {
        someFunction: function () {
            // ClassA some stuff
        }
    }
});

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

La partie HTML:

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

Base sur ce post , devrait être modifié de cette façon:

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