首先来思考一个问题：是否有一种方法可以从子组件填充父组件的插槽？
最近一位同事问我这个问题，答案很简单：可以的。但我的解决方案可能和你想的完全不一样，这是涉及一个棘手的Vue架构问题，但也是一个非常有趣的问题。
为什么会有这个问题
在我们的应用程序中，我们有一个顶部栏，其中包含不同的按钮、搜索栏和其他一些控件。根据每个人所在的页面，它可能略有不同，因此我们需要一种基于每个页面配置它的方法。
为此，我们希望每个页面都能够配置操作栏。看起来很简单，但这里有个问题
这个顶部栏(我们称之为
ActionBar)实际上是我们的主布局的一部分，结构如下：
<template>
<div>
<FullPageError />
<ActionBar />
<App />
</div>
</template>根据你所在的页面/路线动态注入
App的位置。我们可以使用
ActionBar上的一些插槽来配置它。 但是，我们如何从
App组件中控制这些插槽？定义问题
首先，最好是尽可能清楚地知道我们要解决的问题。
我们来看一个具有一个子组件和一个插槽的组件：
// Parent.vue
<template>
<div>
<Child />
<slot />
</div>
</template>我们可以这样填充
Parent的插槽：
// App.vue
<template>
<Parent>
<p>This content goes into the slot</p>
</Parent>
</template>这里没什么特别的。。。
填充子组件的插槽很容易，这也是使用插槽的最常见方式。
但是，有没有一种方法可以控制从
Child组件内部进入
Parent组件
slot的内容呢？换种说法：我们可以让子组件填充父组件的插槽吗？来看看我想到的第一个解决方案。
向下使用 props，向上使用 event
数据流经组件树的唯一途径是使用
props。 而向上通信的方法是使用事件。这意味着，如果要让子组件与父组件进行通信，我们需要使用事件来实现。
