Vue.js рендерится из дочернего в родительский, когда это необходимо, так же как и в режиме роутера

Question

Я пытаюсь динамически отображать нижний колонтитул / заголовок на основе дочернего представления в ionic

Я использую Ionic 4 Framework в сочетании с Vue.js. Пробные слоты и тому подобное, с ощущением, что я на правильном пути, но еще не до конца.

У меня есть Base.vue (компонент), который содержит

<template>
  <ion-app>
    <ion-page class="ion-page" main>
        <page-header />
        <router-view />
        <page-footer />
    </ion-page>
  </ion-app>
</template>

<script>
import PageHeader from '@/components/PageHeader'
import PageFooter from '@/components/PageFooter'
import { mapState } from 'vuex'

export default {
  name: 'master',
  components: {
    PageHeader,
    PageFooter,
  },
}
</script>

В детстве у меня есть следующее; я знаю, что это неправильный подход, чтобы включать его в <ion-content>, но не знаю, как правильно это настроить:

<template>
  <ion-content fullscreen>
    <page-header>
        <ion-toolbar>
            <ion-title>
                Test
            </ion-title>
        </ion-toolbar>
    </page-header>

    <ion-content>
        <p>Schedule page</p>
    </ion-content>
  </ion-content>
</template>

<script>
import PageHeader from '@/components/PageHeader'

export default {
  name: 'schedule',
  components: {
    PageHeader,
  },
}
</script>

Компонент заголовка (который должен быть динамическим):

<template>
  <ion-header>
    <slot name="header" />
  </ion-header>
</template>

<script>
  export default {
    name: 'page-header',
  }
</script>

Я пытаюсь создать Base.vue с динамическим заголовком (PageHeader.vue), чтобы на основе данного дочернего представления я мог изменить или расширить заголовок, если это необходимо.

Answer 1

Так что я думаю, что вы хотите изменить содержимое заголовка страницы в зависимости от дочернего элемента.

Компоненты не могут напрямую влиять на шаблоны других компонентов в дереве. Слоты дают вам некоторый контроль над этим, но он ограничен разрешением компоненту вставлять шаблоны в разделы дочернего компонента, а не наоборот.

Ваши варианты:

1. Добавьте логику к вашему родительскому компоненту, который определяет, какой дочерний компонент отображается, и затем соответственно измените заголовок страницы. Однако заголовок страницы не будет напрямую контролироваться дочерним компонентом.

2. Использование именованных представлений с vue-router.

3. Используйте что-то вроде portal-vue , но не сходите с ума от такой силы ...