我们可以让子组件填充父组件的插槽吗?
但实际上,这个问题与
props没有任何关系。 更简单地说,它是关于使子组件控制在其自己的子树之外渲染的内容。我们可以这样表述问题
组件控制在其子组件之外渲染的内容的最佳方法是什么?
通过这个镜头检查我们提出的每个解决方案,都会为我们提供一个有趣的新视角。
向父组件发出事件
数据流经组件树的唯一途径是使用
props。 而向上通信的方法是使用事件。这意味着,如果要让子组件与父组件进行通信,我们需要使用事件来实现。静态配置
只是将必要的信息提供给其他组件,而不是主动地要求另一个组件做事情。
传送门
组件无法控制其子树之外的内容。这里的每个方法都是让另一个组件执行我们的命令并控制我们真正感兴趣的元素不同的方式。
在这方面,使用
portal 更好的原因是它们允许我们将所有这些通信逻辑封装到单独的组件中。提升状态
提升状态是一种比我们前面看到的3种更简单、更强大的技术,这里我们的主要限制是我们想要控制的内容在子组件之外。
最简单的解决方法是:
提升状态以及操纵该状态的逻辑,使我们可以拥有更大范围的组件,并将目标元素包含在该组件中。如果可以这样做,这是解决此特定问题以及所有相关问题的最简单方法。
请记住,这并不一定意味着要提升整个组件。 你也可以重构你的应用程序,以将逻辑移到组件树中更高的组件中。
依赖注入
如果熟悉软件工程设计模式的人可能已经注意到,我们在这里所做的是依赖注入,这是我们在软件工程中已经使用了几十年的技术。
它的用途之一是编写易于配置的代码。在我们的例子中,,我们在使用的每个
Page中以不同的方式配置
Layout组件。当调换
Page和
Layout组件时,我们正在执行所谓的控件反转。在基于组件的框架中,父组件控制子组件的操作,因此我们选择让
Page来控制
Layout组件,而不是由
Layout组件控制Page。为了做到这一点,我们使用插槽为
Layout组件提供完成任务所需的内容。










