考虑 Portal（传送门）
Vue 中的 Portal 技术 在 Vue 项目中，我们使用模板来声明 dom
嵌套关系，然而有时候一些组件需要脱离固定的层级关系，不再受制与层叠上下文，比如说 Modal 和 Dialog
这种组件就希望能够脱离当前模板所在的层叠上下文。在 Vue 中有两种方式来实现这种效果，一种是使用指令，操作真实 dom，使用熟知的 dom 操作方法将指令所在的元素 append
到另外一个 dom 节点上去。另一种方式就是定义一套组件，将组件内的 vnode 转移到另外一个组件中去，然后各自渲染。
它们的工作方式和你想象的完全一样。你可以把任何东西从一个地方传送到另一个地方。在我们的例子中，我们将元素从DOM中的一个位置“传送”到另一个位置。
无论组件树如何显示，我们都可以控制组件在DOM中的显示位置。
例如，假设我们想要填充一个
modal。但是我们的
modal必须在根页面处渲染，这样我们才能正确地覆盖它。首先，我们要在
modal中指定我们想要的：
<template>
<div>
<!-- Other components -->
<Portal to="modal">
Rendered in the modal.
</Portal>
</div>
</template>然后，在我们的
modal组件中，我们将拥有另一个将内容渲染出来的 portal：
<template>
<div>
<h1>Modal</h1>
<Portal from="modal" />
</div>
</template>这是一项改进，因为现在我们实际上是在编写HTML，而不仅仅是传递对象。 它更具声明性，更容易查看应用程序中发生的事情。
由于 portal 在背后执行一些操作以在不同位置渲染元素，因此它完全打破了DOM渲染在Vue中工作方式的模型。 看起来您正在正常渲染元素，但根本无法正常工作，这可能会引起很多混乱和沮丧。
还有一个很大的问题，稍后我们会讲到。
提升状态
“提升状态”是指将状态从子组件移动到父组件或祖父组件，将它向上移动到组件树中。
这可能对应用程序的体系结构产生较大的影响。对于我们的目的，这会是更简单的解决方案。
这里的“状态”是我们试图传递到
ActionBar组件插槽中的内容。但是该状态包含在
Page组件中，我们不能真正将
page 特定的逻辑移到
