Vue.js 在需要时从 child 渲染到 parent 就像 router-view

Question

我正在尝试根据 ionicchild 视图动态显示 footer/header

我将 Ionic 4 框架与 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>

作为 child 视图，我有以下内容；我知道将它包含在 <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>

header 组件（应该是动态的）：

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

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

我想做的是制作一个带有动态 header (PageHeader.vue) 的 Base.vue，因此根据给定的 child 视图，我可以更改或如果需要，扩展 header。

Answer 1

所以我想你是说你想根据 child 更改页眉的内容。

组件不能直接影响树中其他组件的模板。插槽可以让您对此进行一些控制，但仅限于允许组件将模板注入 child 组件的部分，而不是相反。

您的选择是：

向您的 parent 组件添加逻辑以检测显示的 child 组件，然后相应地更改页眉。不过，页眉不会直接由 child 组件控制。
将 named views 与 vue-router 结合使用。
使用类似portal-vue的东西，但不要对这种力量发疯...

Vue.js 在需要时从 child 渲染到 parent 就像 router-view

Vue.js render from child into parent when needed just like router-view

parent-child

vue.js

vue-component

ionic4