vue.js像路由器视图一样，在需要时从孩子渲染到父母

Question

我正在尝试根据离子视图在离子视图

中动态显示页脚/标头

我正在使用离子4框架与vue.js结合使用。尝试了插槽，这种感觉我在正确的道路上，但还没有完全。

我有一个base.vue(component(

<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>

我要做的是用动态标头(pageheader.vue(做一个基础。

，所以我想您是说您想根据孩子更改页面标题的内容。

组件不能直接影响树中其他组件的模板。插槽可以使您对此有一定的控制权，但是它仅限于允许组件将模板注入儿童组件的各个部分，而不是相反。

您的选择是：

1. 将逻辑添加到您的父组件中，该逻辑检测显示的子组件的显示，然后相应地更改页面标头。页面标头不会直接由子组件控制。

2. 使用vue-router的命名视图。

3. 使用类似Portal-vue之类的东西，但不要对这种力量发疯...