Propiedad extends de Vue3

Vue3 选项式 APIAPI de Opciones de Vue3

En Vue3,extendsla propiedad es una característica muy útil que te permite heredar y extender componentes existentes.

Mediante el uso deextends, puedes reutilizar y personalizar la lógica de los componentes existentes sin tener que reescribir código.

Escenarios de uso

extendsLa propiedad normalmente se usa en los siguientes escenarios:

  1. Reutilizar la lógica de componentes: cuando tienes un componente base y otros componentes necesitan heredar su lógica.
  2. Personalizar el comportamiento de componentes: cuando necesitas personalizar o anular ciertos comportamientos sobre la base de la herencia.
  3. Construir componentes configurables: mediante la herencia y la extensión, construir componentes más flexibles y configurables.

Sintaxis básica

Ejemplo

import BaseComponent from './BaseComponent.vue';

export default {
  extends: BaseComponent,
  // Aquí se pueden añadir nuevas opciones o sobrescribir opciones existentes
};

En el código anterior, a través deextendsla propiedad heredóBaseComponentcomponente. Después, puedes añadir nuevas opciones a este componente, o sobrescribirBaseComponentlas opciones existentes en

Ejemplo

1. Componente base

Primero, definimos un componente baseBaseComponent.vue：

Ejemplo

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

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

2. Componente que hereda

A continuación, creamos un nuevo componenteExtendedComponent.vue, que hereda deBaseComponent, y sobrescribemessagelos datos:

Ejemplo

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

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

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

En este ejemplo,ExtendedComponentheredaBaseComponenttoda la lógica de, pero sobrescribemessagelos datos.Hello from ExtendedComponent!。

Consideraciones

  1. Fusión de opciones: cuando se usaextendsla propiedad, Vue realiza la fusión de opciones. Paradata、methodslas opciones de tipo objeto, Vue realiza una fusión superficial. Si hay propiedades con el mismo nombre, las propiedades del componente hijo sobrescriben las del componente padre.

  2. Ganchos del ciclo de vida: si el componente hijo y el componente padre definen el mismo gancho del ciclo de vida, ambas funciones de gancho serán invocadas, y la función de gancho del componente padre se ejecutará antes que la del componente hijo.

  3. Sobrescritura de plantilla：extendsLa propiedad solo hereda la parte lógica, la parte de la plantilla no se hereda. Si necesitas heredar la plantilla, puedes considerar usarslotsomixins。

Vue3 选项式 APIAPI de Opciones de Vue3

Otras extensiones