Propriété extends de Vue3

Vue3 选项式 APIVue3 API des options

Dans Vue3,extendsla propriété est une fonctionnalité très utile qui vous permet d'hériter et d'étendre des composants existants.

En utilisantextends, vous pouvez réutiliser et personnaliser la logique de composants existants sans réécrire le code. Cela est très utile pour réduire la redondance du code et améliorer la maintenabilité du code.

Cas d'utilisation

extendsLa propriété est généralement utilisée dans les scénarios suivants :

  1. Réutiliser la logique des composants: Lorsque vous avez un composant de base et que d'autres composants doivent hériter de sa logique.
  2. Personnaliser le comportement des composants: Lorsque vous devez personnaliser ou remplacer certains comportements en fonction de l'héritage.
  3. Créer des composants configurables: En héritant et en étendant, créez des composants plus flexibles et configurables.

Syntaxe de base

Exemple

import BaseComponent from './BaseComponent.vue';

export default {
  extends: BaseComponent,
  // Ici, vous pouvez ajouter de nouvelles options ou remplacer les options existantes
};

Dans le code ci-dessus, nous utilisons laextendspropriété pour hériter duBaseComponentcomposant. Ensuite, vous pouvez ajouter de nouvelles options à ce composant, ou remplacerBaseComponentles options existantes qu'il contient.

Exemple

1. Composant de base

Tout d'abord, nous définissons un composant de baseBaseComponent.vue：

Exemple

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from BaseComponent!'
    };
  }
};
</script>

2. Composant héritier

Ensuite, nous créons un nouveau composantExtendedComponent.vue, qui hérite deBaseComponent, et redéfinit lemessagedata:

Exemple

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import BaseComponent from './BaseComponent.vue';

export default {
  extends: BaseComponent,
  data() {
    return {
      message: 'Hello from ExtendedComponent!'
    };
  }
};
</script>

Dans cet exemple,ExtendedComponenthériteBaseComponenttoute la logique de, mais remplace lamessagedata. Par conséquent, le résultat final rendu estHello from ExtendedComponent!。

Notes

  1. Fusion d'options: Lors de l'utilisation de laextendspropriété, Vue effectue une fusion d'options. Pourdata、methodset d'autres options de type objet, Vue effectue une fusion superficielle. Si une propriété portant le même nom existe, la propriété du composant enfant remplace la propriété du composant parent.

  2. Hooks de cycle de vie: Si le composant enfant et le composant parent définissent le même hook de cycle de vie, les deux fonctions de hook seront appelées, et la fonction de hook du composant parent s'exécutera avant la fonction de hook du composant enfant.

  3. Remplacement du template：extendsLa propriété hérite uniquement de la partie logique ; la partie template ne sera pas héritée. Si vous devez hériter du template, vous pouvez envisager d'utiliserslotsoumixins。

Vue3 选项式 APIVue3 API des options

Autres extensions