时间戳

首页 > 解决方案 > Vue.js 在需要时从子级渲染到父级，就像路由器视图一样

vue.js - Vue.js 在需要时从子级渲染到父级，就像路由器视图一样

问题描述

我正在尝试根据 ionic 中的子视图动态显示页脚/页眉

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

作为子视图，我有以下内容；我知道将其包含在其中不是正确的方法，<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）的 Base.vue，因此如果需要，我可以根据给定的子视图更改或扩展标题。

标签： vue.jsvue-componentparent-childionic4

解决方案

所以我认为你是说你想根据孩子改变页眉的内容。

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

您的选择是：

  1. 向父组件添加逻辑，以检测显示的子组件，然后相应地更改页眉。但是，页眉不会直接由子组件控制。

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

  3. 使用类似portal-vue 的东西，但不要因为这种力量而发疯......

推荐阅读