在VUE的组件开发过程中，它对于传输几乎至关重要，在创建高级组件时，这非常有用。可以将传输类型分为三类：属性透明度，事件透明度和插槽透明度。它们与它们相对应。...
每个人都必须非常熟悉属性和事件的传输。我们经常使用变速箱的属性和事件。有关详细信息，请参阅官方文档“vm。$ attrs”和“vm。$侦听器”的用法。但是，除了插槽传输方面，除了手写的相应插槽名称外，还可以成为更优雅的处理方法。
本文主要解释了如何使用JSX在VUE2中编写组件，因此请确保在启动之前了解渲染函数的数据对象结构，并且某些方案也将提供模板写作实例。，可以参考用法。
首先，我们根据组件开发了一个组件。
我们通过定制组件自定义基本输入组件的样式，并在使用自定义Input组件时手动传递基本输入组件所需的和插槽。如果您想实现此类需求，我们通常会在自定义input中写入：
模板写作等效
尽管这可以实现需求，但一旦基本输入组件的插槽数量增加，我们就必须在自定义上贫穷。显然，这对维护自定义组件并不友好，并且相同。我们只是根据基本输入组件自定义一个小功能。另外，我们只想将自定义组件用作baseInput。
因此，有什么方法可以轻松地传输插槽，就像透明属性和事件一样容易吗？以这种方式，当baseInput增加API而无需修改时，可以自动继承自定义输入。
API而不是使用JSX在上面使用JSX编写插槽代码，这实际上是原因。在官方文档中查看$ scopedSlots API的描述。
版本2.6之后，现在所有内容都将作为一个函数暴露。如果您使用渲染函数，无论当前插槽是否处于活动状态未来，但也使您可以轻松迁移到所有插槽3。
有关特定的暴露方法，请参阅下面的源代码部分：
首先，这使我们在插槽中添加了一个简单的更改。
此外，一切都将作为功能暴露。当我们第一次编写插槽时，我们可以直接使用并传递参数。用户是否确定它是否非常灵活。
其次，面对未来的编程，迁移到vue3版本很方便。在VUE3版本中，所有插槽均以功能公开。如果我们现在开始使用它，如果将来需要迁移，则插槽的插槽部分只需要简单地被简单的全局替换替换。在没有副作用的情况下节省麻烦是非常方便的。
借助上述基础，我们的自定义组件进行了升级，并直接通过渲染函数。结果，传递给自定义的所有属性，事件和插槽将传递给baseinput component.same。
尽管所使用的所有视觉都很漂亮，也许是由于历史原因，我们使用的基本组件库在语法中并不均匀地使用，并且该组件的相当一部分仍在使用中。尽管中间的内容会公开函数另一方面，没有任何联系。
假设我们的基本输入组件用于调用插槽，并且我们仅通过自定义中间组件传递。在这种情况下，由于原因将无法获得基本输入。因此，自定义中间组件还需要将自己的方式传递给通过儿童的基础工具以实现传播，如下所示：
由于模板模板无法将SpopeedSlot参数传递到子类，因此只能通过V-For遍历来生成相应的模板，如下所示::::
基于上述特征，我们可以使用V-For在中间自定义上遍历并填充组件以实现效果。
根据上述JSX和模板的相应撰写以及兼容章节的叙述，有以下结论：
如果接收器使用模板方法在内部编写组件，或者在使用JSX时使用API，则我们使用JSX使用JSX使用渲染函数的scopedSlots参数来通过使用JSX快速透明插槽。
如果接收器被混合并用JSX编写中间组件，则需要以其他方法来传输中间层本身，以确保接收器可以正常获得相关的插槽。
当然，无论接收器（baseinput）组件如何编写插槽，我们都可以一劳永逸地通过中间层（customInput）。但是，如果您说您只想使用JSX他们俩。
在VUE3中，所有插槽都是函数，它们均匀暴露于均匀的函数，我们可以看到VUE2。
JSX中的写作可以参考VUE3版本的Babel-Plugin-JSX，并使用指定的传递对象。
模板写作与VUE2相同，但是V-For遍历的对象已成为。请参阅上述写作方式。
合理使用透明度可以大大提高高级组件开发的效率。同时，它还可以降低组件的维护成本。使用更少的代码，它可以实现更多的东西，并且易于维护。
原始：https：//juejin.cn/post/7094858996103774245