【Vue原理】Slot - 源码版之普通插槽

发布网友发布时间：2024-09-25 15:36

共1个回答

热心网友时间：2024-10-04 12:16

Vue源码中的Slot机制有助于理解组件间的内容传递，今天我们将深入剖析普通插槽的原理。首先，普通插槽包括默认Slot和具名Slot，它们的主要区别在于是否具有自定义名称，但处理方式相似。

以一个简单示例开始，我们创建一个父组件，其中包含名为'test'的子组件，它有一个slot区域。插槽内容解析的关键在于，其作用域在父实例上，这意味着slot内的变量会直接引用父实例的属性，如上面例子中的name。

当父组件渲染时，会绑定父实例为执行上下文，test组件内的slot内容会根据with语句访问父实例的变量。解析插槽内容的过程与普通模板节点的解析流程相同，只是访问的是父实例的属性。

接下来，父组件生成的VNode会包含子组件test及其slot。尽管HTML中不会直接出现'test'标签，但Vue会将其视为一个组件。在patch阶段，Vue会根据VNode创建DOM并插入页面。当遇到test组件时，会解析其组件模板，将slot内容存储在组件实例的$slot属性中。

最后，test组件的渲染函数中会调用_renderChildren中的slot信息，替换slot占位符，形成最终的渲染逻辑。整个过程可以总结为：插槽内容解析、父组件VNode处理、slot转存至子组件实例以及渲染函数的替换。

以上就是普通插槽在Vue源码中的工作流程，接下来的文章会继续深入讲解其他类型的slot和相关原理。如果你对Vue源码感兴趣，可以查看我们的系列分享：【Vue原理】Vue源码阅读总结大会 - 序，以及之前关于响应式原理、Props等的文章。