Vue插槽实现原理实例分析
本篇内容介绍了“Vue插槽实现原理实例分析”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
吉隆网站建设公司成都创新互联,吉隆网站设计制作,有大型网站制作公司丰富经验。已为吉隆1000+提供企业网站建设服务。企业网站搭建\成都外贸网站建设公司要多少钱,请找那个售后服务好的吉隆做网站的公司定做!
一、样例代码
这是默认插槽 这是具名插槽 这是作用域插槽(老版){{scope.test}} 这是作用域插槽(新版){{scopeProps.test}}
二、透过现象看本质
插槽的作用是实现内容分发,实现内容分发,需要两个条件:
占位符
分发内容
组件内部定义的slot
标签,我们可以理解为占位符,父组件中插槽内容,就是要分发的内容。插槽处理本质就是将指定内容放到指定位置。废话不多说,从本篇文章中,将能了解到:
插槽的实现原理
render
方法中如何使用插槽
三、实现原理
vue
组件实例化顺序为:父组件状态初始化(data
、computed
、watch
...) --> 模板编译 --> 生成render
方法 --> 实例化渲染watcher
--> 调用render
方法,生成VNode
--> patch VNode
,转换为真实DOM
--> 实例化子组件 --> ......重复相同的流程 --> 子组件生成的真实DOM
挂载到父组件生成的真实DOM
上,挂载到页面中 --> 移除旧节点
从上述流程中,可以推测出:
1.父组件模板解析在子组件之前,所以父组件首先会获取到插槽模板内容
2.子组件模板解析在后,所以在子组件调用render
方法生成VNode
时,可以借助部分手段,拿到插槽的VNode
节点
3.作用域插槽可以获取子组件内变量,因此作用域插槽的VNode
生成,是动态的,即需要实时传入子组件的作用域scope
整个插槽的处理阶段大致分为三步:
编译
生成渲染模板
生成VNode
以下面代码为例,简要概述插槽运转的过程。
123
四、父组件编译阶段
编译是将模板文件解析成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.js export 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 } }
作用域插槽与具名插槽区别
{{scope.hello}}
作用域插槽与普通插槽相比,主要区别在于插槽内容可以获取到子组件作用域变量。由于需要注入子组件变量,相比于具名插槽,作用域插槽有以下几点不同:
作用域插槽在组装渲染方法时,生成的是一个包含注入作用域的方法,相对于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函数这两步内容较多,流程较长,比较难理解。
十、使用技巧
通过以上解析,能大概了解插槽处理流程。工作中大部分都是用模板来编写vue
代码,但是某些时候模板有一定的局限性,需要借助于render
方法放大vue
的组件抽象能力。那么在render
方法中,我们插槽的使用方法如下:
10.1、具名插槽
插槽处理一般分为两块:
父组件:父组件只需要写成模板编译成的渲染方法即可,即指定插槽
slot
名称子组件:由于子组件时直接拿父组件初始化阶段生成的
VNode
,所以子组件只需要将slot
标签替换为父组件生成的VNode
,子组件在初始化状态时会将具名插槽挂载到组件$slots
属性上。
10.2、作用域插槽
作用域插槽使用比较灵活,可以注入子组件状态。作用域插槽 + render
方法,对于二次组件封装作用非常大。举个栗子,在对ElementUI
table
组件进行基于JSON
数据封装时,作用域插槽用处就非常大了。
“Vue插槽实现原理实例分析”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!
当前文章:Vue插槽实现原理实例分析
本文路径:http://pwwzsj.com/article/pecogj.html