<aside> 🔗 TOC

</aside>

现在有个需求，就是页面中某个组件渲染的时候动态改变另一个组件的某个部分。

下面是简化后的页面，页面有个 Header，内容中有个按钮可以切换两个组件。

代码也很简单：

<!-- App.vue -->
<template>
    <div class="app">
        <header />
        <div class="app-content">
            <el-button @click="flag = !flag" type="primary">切换组件</el-button>
            <ComA v-if="flag" />
            <ComB v-else />
        </div>
    </div>
</template>

<script setup lang="ts"> import { ref } from 'vue'
import Header from './components/Header.vue'
import ComA from './components/ComA.vue'
import ComB from './components/ComB.vue'
const flag = ref(true) 
</script>

现在是要当 A组件 渲染的时候，标题显示 A 组件 ，当 B组件 渲染的时候，标题显示 B 组件。

如果你使用过或者开发过微信小程序应该知道，当切换到某个页面的时候，小程序顶部的标题是可以改变的，在小程序中这是通过配置文件实现的。那么在网页端中怎么做呢？

下面给出两种方法。

方法 1：Teleport 组件

如果你学过 Vue3，应该已经想到了这个方案，就是在组件 AB 中使用 Vue3 的内置组件Teleport把模板渲染到 Header 当中去。

<!-- ComA.vue -->
<template>
    <div class="com-a">
        这是页面A
        <Teleport to=".header .main">
            <div>A页面</div>
        </Teleport>
    </div>
</template>

<script setup lang="ts"></script>

这样大部分需求都解决了，但还是有些问题，就是不够灵活，比如标题有默认内容时，用 Teleport 组件会往后面插入内容，这就不是很好解决了。

方法 2：借助变量✨

大概思路就是，拿到要渲染的模板的虚拟 DOM，保存到一个变量中，在 Header 中使用 component 组件渲染。

为了方便我们可以自定义一个组件，写在该组件的内容会保存在某个地方，并什么都不渲染。

// helper.ts
import { SetupContext, Slots, defineComponent, ref } from 'vue'
// 用来保存虚拟DOM的变量
const content = ref<Slots | null>(null)
// 自定义组件，使用该组件时，组件内的所有内容会被保存到变量content当中，原地什么都不渲染
const HeaderContent = defineComponent((_props: any, ctx: SetupContext) => {
    content.value = ctx.slots
    // 返回什么都不渲染的render函数
    return () => null
})
export { content, HeaderContent }

这逻辑就是这么简单。接下来只要在 Header 中使用 component 组件渲染刚才被保存下来的虚拟 DOM 的内容即可，并且你可以自己做一些逻辑判断，加默认内容等等。