vue slot的原理

Vue的插槽（slot）是一种用于在组件中承载内容的机制。在Vue中，插槽的原理可以通过源码来解析。

首先，在Vue的组件中使用插槽的地方，会被编译成一个函数调用，具体代码是`_renderSlot(_ctx.$slots, "default", {count: _ctx.count})`。这个函数名叫`_renderSlot`。

`_renderSlot`函数的定义是这样的：

export function renderSlot(
  slots: Slots,
  name: string,
  props: Data = {},
  fallback?: () => VNodeArrayChildren,
  noSlotted?: boolean
): VNode {
  // ...
  // 函数内部的实现逻辑
  // ...
  return rendered
}

在这个函数内部，会先对插槽进行处理，保证插槽的内容是一个有效的VNode节点。然后，使用`createBlock`函数创建一个包含插槽内容的VNode节点。最后，将这个节点返回。

所以，Vue的插槽的原理就是，在编译时将插槽内容包装成一个函数，并使用`createBlock`函数创建一个包含插槽内容的VNode节点。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [vue插槽slot的简单理解与用法实例分析](https://download.csdn.net/download/weixin_38630853/12927251)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [Vue slot 详解](https://blog.csdn.net/huangyilinnuli/article/details/119272944)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [vue slot的原理](https://blog.csdn.net/qq_36262295/article/details/116203390)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]