Как создать родительский макет в VueJS

Question

У меня есть следующая структура компонентов и код компонентов: структура и код

Существует два макета: UserLayout и OrganizationLayout.

OrganizationLayout выглядит как UserLayout, норазница заключается только в компоненте навигации внутри заголовка.

Кроме того, как OrganizationLayout, так и UserLayout требуют отображения данных профиля пользователя.Поэтому я хочу унаследовать OrganizationLayout от UserLayout и загружать данные только в одном месте - внутри компонента UserLayout.

Я пытался использовать для этого функцию слотов Vue.js, но после рендеринга дерево компонентов выглядит следующим образом:

OrganizationLayout
  UserLayout
    HeaderTemplate

но я ожидаю:

UserLayout
  OrganizationLayout
     HeaderTeamplate

Как я могу это сделать?

ОБНОВЛЕНИЕ: Я обнаружил ту же проблему, что обсуждалась здесь:https://github.com/vuejs/vue/issues/6811

Answer 1

Эту проблему невозможно решить с помощью Vue.js без плагинов или HTML-препроцессоров.Для получения дополнительной информации, пожалуйста, смотрите: https://github.com/vuejs/vue/issues/6811

Вы можете использовать Pug или плагин (см. Вопрос выше) для расширения шаблонов компонента.Чтобы расширить только логику, вы можете использовать Vue "extends".