2025年vue插槽的原理（vuejs插槽）

大家好，我是讯享网，很高兴认识大家。

 <div id="navCategory"></div>

讯享网

插槽的作用是实现内容分发，实现内容分发，需要两个条件：

占位符
分发内容

组件内部定义的标签，我们可以理解为占位符，父组件中插槽内容，就是要分发的内容。插槽处理本质就是将指定内容放到指定位置。废话不多说，从本篇文章中，将能了解到：

插槽的实现原理
方法中如何使用插槽

组件实例化顺序为：父组件状态初始化(、、...) --> 模板编译 --> 生成方法 --> 实例化渲染 --> 调用方法，生成 --> ，转换为真实 --> 实例化子组件 --> ......重复相同的流程 --> 子组件生成的真实挂载到父组件生成的真实上，挂载到页面中 --> 移除旧节点

从上述流程中，可以推测出：

1.父组件模板解析在子组件之前，所以父组件首先会获取到插槽模板内容

2.子组件模板解析在后，所以在子组件调用方法生成时，可以借助部分手段，拿到插槽的节点

3.作用域插槽可以获取子组件内变量，因此作用域插槽的生成，是动态的，即需要实时传入子组件的作用域

整个插槽的处理阶段大致分为三步：

编译
生成渲染模板
生成VNode

以下面代码为例，简要概述插槽运转的过程。

编译是将模板文件解析成语法树，会将插槽解析成如下数据结构：

根据语法树，解析生成渲染方法字符串，最终父组件生成的结果如下所示，这个结构和我们直接写方法一致，本质都是生成, 只不过或是的缩写。

调用方法，生成,具体格式如下：

在中，组件是页面结构的基本单元，从上述的中，我们也可以看出，页面层级结构结束于组件，组件处理会在子组件初始化过程中处理。子组件构造方法组装与属性合并在vue-devsrccorevdomcreate-component.js 方法中，组件实例化调用入口是在vue-devsrccorevdompatch.js 方法中。

讯享网

实例化子组件时，会在 -> 方法中，将子组件插槽节点挂载到组件作用域中，挂载形式为形式。

子组件在编译阶段，会将节点，编译成以下结构：

生成的渲染方法如下，其中为方法的简写，从方法，我们就可以直观的将插槽内容与插槽点联系在一起。

作用域插槽与具名插槽区别

作用域插槽与普通插槽相比，主要区别在于插槽内容可以获取到子组件作用域变量。由于需要注入子组件变量，相比于具名插槽，作用域插槽有以下几点不同：

作用域插槽在组装渲染方法时，生成的是一个包含注入作用域的方法，相对于生成，多了一层注入作用域方法包裹，这也就决定插槽作用域插槽是在子组件生成时生成，而具名插槽是在父组件创建时生成。为，其作用为将节点配置项转换为形式。

子组件初始化时会处理具名插槽节点，挂载到组件中，作用域插槽则在中直接被调用

除此之外，其他流程大致相同。插槽作用机制不难理解，关键还是模板解析与生成render函数这两步内容较多，流程较长，比较难理解。

通过以上解析，能大概了解插槽处理流程。工作中大部分都是用模板来编写代码，但是某些时候模板有一定的局限性，需要借助于方法放大的组件抽象能力。那么在方法中，我们插槽的使用方法如下：

插槽处理一般分为两块：

父组件：父组件只需要写成模板编译成的渲染方法即可，即指定插槽名称
子组件：由于子组件时直接拿父组件初始化阶段生成的，所以子组件只需要将标签替换为父组件生成的，子组件在初始化状态时会将具名插槽挂载到组件属性上。

作用域插槽使用比较灵活，可以注入子组件状态。作用域插槽 + 方法，对于二次组件封装作用非常大。举个栗子，在对组件进行基于数据封装时，作用域插槽用处就非常大了。

以上就是浅谈Vue插槽实现原理的详细内容，更多关于Vue插槽的资料请关注脚本之家其它相关文章！

2025年vue插槽的原理（vuejs插槽）

相关推荐