vue remplace la méthode de la classe parent

Lors du développement de Vue, l'utilisation de l'héritage de composants est souvent impliquée. Les méthodes des composants parents sont généralement héritées et appelées par les composants enfants, mais dans certains cas, nous devons remplacer les méthodes des composants parents pour répondre à des besoins spécifiques. Cet article explique comment remplacer les composants parents dans Vue.

Pourquoi devez-vous remplacer les méthodes du composant parent

Normalement, les méthodes du composant parent sont partagées par plusieurs composants enfants. Dans certains cas, certains sous-composants doivent apporter les modifications correspondantes aux méthodes du composant parent selon leurs propres conditions. Dans ce cas, il est nécessaire de remplacer les méthodes du composant parent. Par exemple, lorsque nous devons modifier les paramètres passés par le composant parent ou intercepter certaines opérations du composant parent, il devient nécessaire de surcharger la méthode du composant parent.

Comment remplacer les méthodes des composants parents

Dans Vue, il existe deux manières principales de remplacer les méthodes des composants parents : utilisez v-bind pour lier les paramètres ou utilisez la méthode Vue.extend pour créer un composant de sous-classe. Ci-dessous, nous présenterons respectivement ces deux méthodes.

Utilisez v-bind pour lier les paramètres

Dans Vue, lorsque le composant parent transmet des paramètres au composant enfant, vous pouvez lier des données via v-bind. Au cours de ce processus, si le composant enfant souhaite modifier les paramètres passés par le composant parent, il lui suffit de transmettre une fonction de rappel via l'attribut props et d'implémenter la méthode de remplacement du composant parent dans cette fonction de rappel.

Par exemple, supposons que nous ayons un composant Counter comme composant parent, qui a des données de comptage et une méthode show :

<template>
  <div>
    <button @click="showCount">Show count</button>
  </div>
</template>

<script>
  export default {
    data() {
        return {
            count: 0
        }
    },
    methods: {
        show() {
            alert(this.count)
        }
    }
  }
</script>

Maintenant, nous voulons utiliser un composant Child pour remplacer la méthode show afin qu'à chaque fois que la méthode show est appelé, affichez d'abord "Avant show:", puis affichez la valeur du nombre. À ce stade, nous pouvons utiliser v-bind pour lier une nouvelle méthode show dans le composant Child :

<template>
  <div>
    <button @click="showCount">Show count</button>
  </div>
</template>

<script>
  export default {
    props: {
        show: Function
    },
    mounted() {
        this.show = () => {
            alert('Before show：' + this.count)
            this.$props.show()
        }
    }
  }
</script>

De cette façon, lorsque nous transmettons la méthode show dans le composant parent, le composant Child remplacera cette méthode et ajoutera des fonctionnalités modifiées. .

Utilisez la méthode Vue.extend pour créer un composant de sous-classe

Une autre façon d'implémenter une méthode qui remplace le composant parent consiste à utiliser la méthode Vue.extend pour créer un composant de sous-classe. Cette méthode convient aux scénarios dans lesquels plusieurs méthodes du composant parent doivent être remplacées, et le composant enfant peut être plus pratique lorsqu'il est utilisé dans plusieurs composants parents.

La méthode Vue.extend nous permet de créer un nouveau constructeur de composant basé sur le composant parent, et de réécrire le composant parent en définissant les données, méthodes et autres attributs du nouveau constructeur de composant. Par exemple, nous pouvons réécrire la méthode show du composant Counter comme ceci :

import Vue from 'vue'

const Child = Vue.extend({
    data() {
        return {}
    },
    methods: {
        show() {
            alert('Before show：' + this.count)
            this.$super.show()
        }
    }
})

export default {
    components: {
        Child
    },
    data() {
        return {
            Count: Child
        }
    },
    methods: {
        show() {
            alert(this.count)
        }
    }
}

Dans ce code, nous créons un constructeur nommé Child via la méthode Vue.extend, et définissons la méthode show dans le composant Child, via ce $. super appelle la méthode show du composant parent. Ensuite, dans le composant Counter, nous utilisons le composant Child comme constructeur du composant counter. Lorsque la méthode show est appelée, la méthode show dans le composant Child sera déclenchée.

Résumé

Ci-dessus sont deux méthodes de réécriture des méthodes de composants parents dans Vue. Chaque méthode a des scénarios d'application différents, et vous devez choisir la méthode à implémenter en fonction de la situation spécifique. Lors de l'utilisation de Vue, pour une meilleure réutilisation et évolutivité des composants, nous pouvons essayer d'utiliser l'héritage des composants.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!