layout组件中。 我们的状态必须保留在我们正在动态渲染的
Page组件内。因此，我们必须提升整个
Page组件才能提升状态。当前，我们的
Page组件是
Layout组件的子组件：
<template>
<div>
<FullPageError />
<ActionBar />
<Page />
</div>
</template>解除它需要我们将其翻转，并使
Layout组件成为
Page组件的子组件。 我们的
Page组件看起来像这样：
<template>
<Layout>
<!-- Page-specific content -->
</Layout>
</template>现在，我们的
Layout组件将看起来像这样，我们可以在其中使用插槽插入页面内容：
<template>
<div>
<FullPageError />
<ActionBar />
<slot />
</div>
</template>但这还不能让我们自定义任何内容。 我们必须在
Layout组件中添加一些命名的插槽，以便我们可以传递应放置在
ActionBar中的内容。最简单的方法是使用一个插槽来完全替代
ActionBar组件：
<template>
<div>
<FullPageError />
<slot name="actionbar">
<ActionBar />
</slot>
<slot />
</div>
</template>这样，如果你不指定
“actionbar”插槽，默认使用
ActionBar组件。 但我们可以使用自己的自定义
ActionBar配置覆盖此插槽：
<template>
<Layout>
<template #actionbar>
<ActionBar>
<!-- Custom content that goes into the action bar -->
</ActionBar>
</template>
<!-- Page-specific content -->
</Layout>
</template>对我来说，这是一种理想的处理方式，但是它确实需要我们重构页面的布局方式。 对于界面复杂点的，这可能是一项艰巨的任务。
简化一下
当我们第一次定义问题时：
