导航：首页 > 互联网科技 >

Vue插槽实现原理实例分析

发表于：2025-01-23 作者：千家信息网编辑

千家信息网最后更新 2025年01月23日，本篇内容介绍了"Vue插槽实现原理实例分析"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！一、样例代码

千家信息网最后更新 2025年01月23日Vue插槽实现原理实例分析

本篇内容介绍了"Vue插槽实现原理实例分析"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

一、样例代码

  这是默认插槽

二、透过现象看本质

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

占位符
分发内容

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

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

三、实现原理

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

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

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

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

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

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

编译
生成渲染模板
生成VNode

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

四、父组件编译阶段

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

{  tag: 'test',  scopedSlots: { // 作用域插槽    // slotName: ASTNode,    // ...  }  children: [    {      tag: 'template',      // ...      parent: parentASTNode,      children: [ childASTNode ], // 插槽内容子节点，即文本节点123      slotScope: undefined, // 作用域插槽绑定值      slotTarget: "\"hello\"", // 具名插槽名称      slotTargetDynamic: false // 是否是动态绑定插槽      // ...    }  ]}

五、父组件生成渲染方法

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

with(this){  return _c('div',{attrs:{"id":"app"}},  [_c('test',    [      _c('template',{slot:"hello"},[_v("\n      123\n    ")])],2)    ],  1)}

六、父组件生成VNode

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

{  tag: 'div',  parent: undefined,  data: { // 存储VNode配置项    attrs: { id: '#app' }  },  context: componentContext, // 组件作用域  elm: undefined, // 真实DOM元素  children: [    {      tag: 'vue-component-1-test',      children: undefined, // 组件为页面最小组成单元，插槽内容放放到子组件中解析      parent: undefined,      componentOptions: { // 组件配置项        Ctor: VueComponentCtor, // 组件构造方法        data: {          hook: {            init: fn, // 实例化组件调用方法            insert: fn,            prepatch: fn,            destroy: fn          },          scopedSlots: { // 作用域插槽配置项，用于生成作用域插槽VNode            slotName: slotFn          }        },        children: [ // 组件插槽节点          tag: 'template',          propsData: undefined, // props参数          listeners: undefined,          data: {            slot: 'hello'          },          children: [ VNode ],          parent: undefined,          context: componentContext // 父组件作用域          // ...        ]       }    }  ],  // ...}

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

七、子组件状态初始化

实例化子组件时，会在initRender -> resolveSlots方法中，将子组件插槽节点挂载到组件作用域vm中，挂载形式为vm.$slots = {slotName: [VNode]}形式。

八、子组件编译阶段

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

{  tag: 'h2',  parent: undefined,  children: [    {      tag: 'slot',      slotName: "\"hello\"",      // ...    }  ],  // ...}

九、子组件生成渲染方法

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

// 渲染方法with(this){  return _c('h2',[ _t("hello") ], 2)}

// 源码路径：vue-dev\src\core\instance\render-helpers\render-slot.jsexport function renderSlot (  name: string,  fallback: ?Array,  props: ?Object,  bindObject: ?Object): ?Array {  const scopedSlotFn = this.$scopedSlots[name]  let nodes  if (scopedSlotFn) { // scoped slot    props = props || {}    if (bindObject) {      if (process.env.NODE_ENV !== 'production' && !isObject(bindObject)) {        warn(          'slot v-bind without argument expects an Object',          this        )      }      props = extend(extend({}, bindObject), props)    }    // 作用域插槽，获取插槽VNode    nodes = scopedSlotFn(props) || fallback  } else {    // 获取插槽普通插槽VNode    nodes = this.$slots[name] || fallback  }  const target = props && props.slot  if (target) {    return this.$createElement('template', { slot: target }, nodes)  } else {    return nodes  }}

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

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

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

with (this) {        return _c('div', {            attrs: {                "id": "app"            }        }, [_c('test', {            scopedSlots: _u([{                key: "hello",                fn: function(scope) {                    return [_v("\n        " + _s(scope.hello) + "\n      ")]                }            }])        })], 1)    }

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

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