Свойство extends в Vue3

Vue3 选项式 APIVue3 Options API

В Vue3,extendsсвойство — это очень полезная возможность, которая позволяет наследовать и расширять существующие компоненты.

Используяextends, вы можете повторно использовать и настраивать существующую логику компонентов без переписывания кода. Это очень помогает уменьшить дублирование кода и повысить удобство сопровождения кода.

Сценарии использования

extendsСвойство обычно используется в следующих сценариях:

  1. Повторное использование логики компонента: Когда у вас есть базовый компонент, и другие компоненты должны наследовать его логику.
  2. Настройка поведения компонента: Когда нужно настроить или переопределить определённое поведение на основе наследования.
  3. Создание настраиваемых компонентов: Наследуя и расширяя, создавайте более гибкие и настраиваемые компоненты.

Базовый синтаксис

Пример

import BaseComponent from './BaseComponent.vue';

export default {
  extends: BaseComponent,
  // Здесь вы можете добавить новые опции или переопределить существующие опции
};

В приведённом выше коде мы используемextendsсвойство, чтобы унаследоватьBaseComponentкомпонент. После этого вы можете добавить в этот компонент новые опции или переопределитьBaseComponentсуществующие в нём опции.

Пример

1. Базовый компонент

Сначала мы определяем базовый компонентBaseComponent.vue：

Пример

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

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

2. Компонент-наследник

Затем мы создаём новый компонентExtendedComponent.vue, который наследует отBaseComponent, и переопределяетmessagedata:

Пример

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

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

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

В этом примере,ExtendedComponentнаследуетBaseComponentвсю логику, но переопределяетmessagedata. Следовательно, итоговый отрендеренный результат —Hello from ExtendedComponent!。

Примечания

  1. Объединение опций: При использованииextendsсвойства, Vue выполняет объединение опций. Дляdata、methodsи других опций объектного типа, Vue выполняет поверхностное слияние. Если свойство с тем же именем существует, свойство дочернего компонента переопределяет свойство родительского компонента.

  2. Хуки жизненного цикла: Если и дочерний компонент, и родительский компонент определяют один и тот же хук жизненного цикла, будут вызваны обе функции хуков, причём функция хука родительского компонента выполнится перед функцией хука дочернего компонента.

  3. Переопределение шаблона：extendsСвойство наследует только логическую часть; часть шаблона не будет унаследована. Если вам нужно унаследовать шаблон, можно рассмотреть использованиеslotsилиmixins。

Vue3 选项式 APIVue3 Options API

Другие расширения