Vue技巧改写父类slot，如何实现长尾疑问？

本文共计3783个文字，预计阅读时间需要16分钟。

首先思考一个问题：是否存在一种方法可以从子组件填充父组件的插槽？最近一位同事询问我这个问题，答案很简单：可以。但我的解决方案可能和你想象的并不完全一样，这涉及到一个创新点。

首先来思考一个问题：是否有一种方法可以从子组件填充父组件的插槽？

最近一位同事问我这个问题，答案很简单：可以的。但我的解决方案可能和你想的完全不一样，这是涉及一个棘手的Vue架构问题，但也是一个非常有趣的问题。

为什么会有这个问题

在我们的应用程序中，我们有一个顶部栏，其中包含不同的按钮、搜索栏和其他一些控件。根据每个人所在的页面，它可能略有不同，因此我们需要一种基于每个页面配置它的方法。

为此，我们希望每个页面都能够配置操作栏。看起来很简单，但这里有个问题

这个顶部栏(我们称之为ActionBar)实际上是我们的主布局的一部分，结构如下：

<template> <div> <FullPageError /> <ActionBar /> <App /> </div> </template>

根据你所在的页面/路线动态注入App的位置。

我们可以使用ActionBar上的一些插槽来配置它。 但是，我们如何从App组件中控制这些插槽？

定义问题

首先，最好是尽可能清楚地知道我们要解决的问题。