web-dev-qa-db-fra.com

Appeler la méthode parent avec le composant

J'ai un composant et je veux ajouter un écouteur de clic 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>
javascriptvue.js
18
user2036108

Directement à partir du fichier Vue.js documentation :

Dans Vue, la relation composant parent-enfant peut être résumée comme accessoires bas, événements haut. Le parent transmet les données à l'enfant via des accessoires et celui-ci envoie des messages au parent via des événements ...

Vous devez donc émettre un événement click à partir de votre composant enfant lorsque quelque chose se produit, qui peut ensuite être utilisé pour appeler une méthode dans votre modèle parent.

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

14
Lance Whatley

Oui!

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

Chaque composant Vue définit la propriété $parent. À partir de cette propriété, vous pouvez ensuite appeler n’importe quelle méthode existant dans le parent.

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

Note: Bien qu'il ne soit pas recommandé de faire ce genre de chose lorsque vous construisez des composants réutilisables déconnectés, nous construisons parfois des composants non réutilisables associés et dans ce cas, c'est très pratique.

35
Gudradain

La méthode préférée consiste à utiliser les méthodes globales declare en tant que méthodes mixins ou explicitement pass en tant que propriétés des composants enfants (comme vous le feriez pour la transmission de propriétés de données. Le fait d'appeler this.$parent masque la dépendance et vous utilisez des bibliothèques de composants qui créent une hiérarchie enfant plus longue

D'après la réponse de nils à Méthode parent d'appel d'héritage de Vue.js

1. 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();
       }
   }
});

et dans le modèle de SomeComponentA:

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

2. Mixins

S'il s'agit d'une fonctionnalité courante que vous souhaitez utiliser ailleurs, utiliser un mixin peut sembler plus idiomatique:

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 supplémentaires:

8
KyleMit

Vous pouvez transmettre la méthode parent au composant enfant via props ou le faire émettre un événement personnalisé ou natif.

Voici un Plunker pour démontrer les deux approches.

6
miqh

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 la manière suivante:

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