电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術(shù)文章
文章詳情頁

淺談Vue插槽實現(xiàn)原理

瀏覽:111日期:2022-09-28 14:42:01
目錄一、樣例代碼二、透過現(xiàn)象看本質(zhì)三、實現(xiàn)原理四、父組件編譯階段五、父組件生成渲染方法六、父組件生成VNode七、子組件狀態(tài)初始化八、子組件編譯階段九、子組件生成渲染方法十、使用技巧10.1、具名插槽10.2、作用域插槽一、樣例代碼

<!-- 子組件comA --><template> <div class=’demo’> <slot><slot> <slot name=’test’></slot> <slot name=’scopedSlots’ test=’demo’></slot> </div></template><!-- 父組件 --><comA> <span>這是默認插槽</span> <template slot=’test’>這是具名插槽</template> <template slot=’scopedSlots’ slot-scope=’scope’>這是作用域插槽(老版){{scope.test}}</template> <template v-slot:scopedSlots=’scopeProps’ slot-scope=’scope’>這是作用域插槽(新版){{scopeProps.test}}</template></comA>二、透過現(xiàn)象看本質(zhì)

插槽的作用是實現(xiàn)內(nèi)容分發(fā),實現(xiàn)內(nèi)容分發(fā),需要兩個條件:

占位符 分發(fā)內(nèi)容

組件內(nèi)部定義的slot標簽,我們可以理解為占位符,父組件中插槽內(nèi)容,就是要分發(fā)的內(nèi)容。插槽處理本質(zhì)就是將指定內(nèi)容放到指定位置。廢話不多說,從本篇文章中,將能了解到:

插槽的實現(xiàn)原理 render方法中如何使用插槽三、實現(xiàn)原理

vue組件實例化順序為:父組件狀態(tài)初始化(data、computed、watch...) --> 模板編譯 --> 生成render方法 --> 實例化渲染watcher --> 調(diào)用render方法,生成VNode --> patch VNode,轉(zhuǎn)換為真實DOM --> 實例化子組件 --> ......重復(fù)相同的流程 --> 子組件生成的真實DOM掛載到父組件生成的真實DOM上,掛載到頁面中 --> 移除舊節(jié)點

從上述流程中,可以推測出:

1.父組件模板解析在子組件之前,所以父組件首先會獲取到插槽模板內(nèi)容

2.子組件模板解析在后,所以在子組件調(diào)用render方法生成VNode時,可以借助部分手段,拿到插槽的VNode節(jié)點

3.作用域插槽可以獲取子組件內(nèi)變量,因此作用域插槽的VNode生成,是動態(tài)的,即需要實時傳入子組件的作用域scope

整個插槽的處理階段大致分為三步:

編譯 生成渲染模板 生成VNode

以下面代碼為例,簡要概述插槽運轉(zhuǎn)的過程。

<div id=’app’> <test> <template slot='hello'> 123 </template> </test></div><script> new Vue({ el: ’#app’, components: { test: {template: ’<h1>’ + ’<slot name='hello'></slot>’ + ’</h1>’ } } })</script>四、父組件編譯階段

編譯是將模板文件解析成AST語法樹,會將插槽template解析成如下數(shù)據(jù)結(jié)構(gòu):

{ tag: ’test’, scopedSlots: { // 作用域插槽 // slotName: ASTNode, // ... } children: [ { tag: ’template’, // ... parent: parentASTNode, children: [ childASTNode ], // 插槽內(nèi)容子節(jié)點,即文本節(jié)點123 slotScope: undefined, // 作用域插槽綁定值 slotTarget: ''hello'', // 具名插槽名稱 slotTargetDynamic: false // 是否是動態(tài)綁定插槽 // ... } ]}五、父組件生成渲染方法

根據(jù)AST語法樹,解析生成渲染方法字符串,最終父組件生成的結(jié)果如下所示,這個結(jié)構(gòu)和我們直接寫render方法一致,本質(zhì)都是生成VNode, 只不過_c或h是this.$createElement的縮寫。

with(this){ return _c(’div’,{attrs:{'id':'app'}}, [_c(’test’, [ _c(’template’,{slot:'hello'},[_v('n 123n ')])],2) ], 1)}六、父組件生成VNode

調(diào)用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, // 組件為頁面最小組成單元,插槽內(nèi)容放放到子組件中解析 parent: undefined, componentOptions: { // 組件配置項Ctor: VueComponentCtor, // 組件構(gòu)造方法data: { hook: { init: fn, // 實例化組件調(diào)用方法 insert: fn, prepatch: fn, destroy: fn }, scopedSlots: { // 作用域插槽配置項,用于生成作用域插槽VNode slotName: slotFn }},children: [ // 組件插槽節(jié)點 tag: ’template’, propsData: undefined, // props參數(shù) listeners: undefined, data: { slot: ’hello’ }, children: [ VNode ], parent: undefined, context: componentContext // 父組件作用域 // ...] } } ], // ...}

在vue中,組件是頁面結(jié)構(gòu)的基本單元,從上述的VNode中,我們也可以看出,VNode頁面層級結(jié)構(gòu)結(jié)束于test組件,test組件children處理會在子組件初始化過程中處理。子組件構(gòu)造方法組裝與屬性合并在vue-devsrccorevdomcreate-component.js createComponent方法中,組件實例化調(diào)用入口是在vue-devsrccorevdompatch.js createComponent方法中。

七、子組件狀態(tài)初始化

實例化子組件時,會在initRender -> resolveSlots方法中,將子組件插槽節(jié)點掛載到組件作用域vm中,掛載形式為vm.$slots = {slotName: [VNode]}形式。

八、子組件編譯階段

子組件在編譯階段,會將slot節(jié)點,編譯成以下AST結(jié)構(gòu):

{ tag: ’h1’, parent: undefined, children: [ { tag: ’slot’, slotName: ''hello'', // ... } ], // ...}九、子組件生成渲染方法

生成的渲染方法如下,其中_t為renderSlot方法的簡寫,從renderSlot方法,我們就可以直觀的將插槽內(nèi)容與插槽點聯(lián)系在一起。

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

// 源碼路徑:vue-devsrccoreinstancerender-helpersrender-slot.jsexport function renderSlot ( name: string, fallback: ?Array<VNode>, props: ?Object, bindObject: ?Object): ?Array<VNode> { 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 }}

作用域插槽與具名插槽區(qū)別

<!-- demo --><div id=’app’> <test> <template slot='hello' slot-scope=’scope’>{{scope.hello}} </template> </test></div><script> var vm = new Vue({el: ’#app’,components: { test: {data () { return {hello: ’123’ }},template: ’<h1>’ + ’<slot name='hello' :hello='hello'></slot>’ + ’</h1>’ }} })</script>

作用域插槽與普通插槽相比,主要區(qū)別在于插槽內(nèi)容可以獲取到子組件作用域變量。由于需要注入子組件變量,相比于具名插槽,作用域插槽有以下幾點不同:

作用域插槽在組裝渲染方法時,生成的是一個包含注入作用域的方法,相對于createElement生成VNode,多了一層注入作用域方法包裹,這也就決定插槽VNode作用域插槽是在子組件生成VNode時生成,而具名插槽是在父組件創(chuàng)建VNode時生成。_u為resolveScopedSlots,其作用為將節(jié)點配置項轉(zhuǎn)換為{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) }

子組件初始化時會處理具名插槽節(jié)點,掛載到組件$slots中,作用域插槽則在renderSlot中直接被調(diào)用

除此之外,其他流程大致相同。插槽作用機制不難理解,關(guān)鍵還是模板解析與生成render函數(shù)這兩步內(nèi)容較多,流程較長,比較難理解。

十、使用技巧

通過以上解析,能大概了解插槽處理流程。工作中大部分都是用模板來編寫vue代碼,但是某些時候模板有一定的局限性,需要借助于render方法放大vue的組件抽象能力。那么在render方法中,我們插槽的使用方法如下:

10.1、具名插槽

插槽處理一般分為兩塊:

父組件:父組件只需要寫成模板編譯成的渲染方法即可,即指定插槽slot名稱 子組件:由于子組件時直接拿父組件初始化階段生成的VNode,所以子組件只需要將slot標簽替換為父組件生成的VNode,子組件在初始化狀態(tài)時會將具名插槽掛載到組件$slots屬性上。

<div id=’app’><!-- <test>--><!-- <template slot='hello'>--><!-- 123--><!-- </template>--><!-- </test>--></div><script> new Vue({ // el: ’#app’, render (createElement) { return createElement(’test’, [createElement(’h3’, { slot: ’hello’, domProps: { innerText: ’123’ }}) ]) }, components: { test: {render(createElement) { return createElement(’h1’, [ this.$slots.hello ]);}// template: ’<h1>’ +// ’<slot name='hello'></slot>’ +// ’</h1>’ } } }).$mount(’#app’)</script>10.2、作用域插槽

作用域插槽使用比較靈活,可以注入子組件狀態(tài)。作用域插槽 + render方法,對于二次組件封裝作用非常大。舉個栗子,在對ElementUI table組件進行基于JSON數(shù)據(jù)封裝時,作用域插槽用處就非常大了。

<div id=’app’><!-- <test>--><!-- <span slot='hello' slot-scope=’scope’>--><!-- {{scope.hello}}--><!-- </span>--><!-- </test>--></div><script> new Vue({ // el: ’#app’, render (createElement) { return createElement(’test’, {scopedSlots:{ hello: scope => { // 父組件生成渲染方法中,最終轉(zhuǎn)換的作用域插槽方法和這種寫法一致 return createElement(’span’, { domProps: {innerText: scope.hello } }) }} }) }, components: { test: {data () { return { hello: ’123’ }},render (createElement) { // 作用域插槽父組件傳遞過來的是function,需要手動調(diào)用生成VNode let slotVnode = this.$scopedSlots.hello({ hello: this.hello }) return createElement(’h1’, [ slotVnode ])}// template: ’<h1>’ +// ’<slot name='hello' :hello='hello'></slot>’ +// ’</h1>’ } } }).$mount(’#app’)</script>

以上就是淺談Vue插槽實現(xiàn)原理的詳細內(nèi)容,更多關(guān)于Vue插槽的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章!

標簽: Vue
相關(guān)文章:
主站蜘蛛池模板: 新型锤式破碎机_新型圆锥式_新型颚式破碎机_反击式打沙机_锤式制砂机_青州建源机械 | MES系统工业智能终端_生产管理看板/安灯/ESOP/静电监控_讯鹏科技 | 双段式高压鼓风机-雕刻机用真空泵-绍兴天晨机械有限公司 | 海鲜池-专注海鲜鱼缸、移动海鲜缸、饭店鱼缸设计定做-日晟水族厂家 | 诚暄电子公司首页-线路板打样,pcb线路板打样加工制作厂家 | 横河变送器-横河压力变送器-EJA变送器-EJA压力变送器-「泉蕴仪表」 | 卓能JOINTLEAN端子连接器厂家-专业提供PCB接线端子|轨道式端子|重载连接器|欧式连接器等电气连接产品和服务 | 托盘租赁_塑料托盘租赁_托盘出租_栈板出租_青岛托盘租赁-优胜必达 | 上海网站建设-上海网站制作-上海网站设计-上海做网站公司-咏熠软件 | 托盘租赁_塑料托盘租赁_托盘出租_栈板出租_青岛托盘租赁-优胜必达 | 电子海图系统-电梯检验系统-智慧供热系统开发-商品房预售资金监管系统 | 智成电子深圳tdk一级代理-提供TDK电容电感贴片蜂鸣器磁芯lambda电源代理经销,TDK代理商有哪些TDK一级代理商排名查询。-深圳tdk一级代理 | 无菌实验室规划装修设计-一体化实验室承包-北京洁净净化工程建设施工-北京航天科恩实验室装备工程技术有限公司 | 无水硫酸铝,硫酸铝厂家-淄博双赢新材料科技有限公司 | 庭院灯_太阳能景观灯_草坪灯厂家_仿古壁灯-重庆恒投科技 | 英超直播_英超免费在线高清直播_英超视频在线观看无插件-24直播网 | 焊锡丝|焊锡条|无铅锡条|无铅锡丝|无铅焊锡线|低温锡膏-深圳市川崎锡业科技有限公司 | 优宝-汽车润滑脂-轴承润滑脂-高温齿轮润滑油脂厂家 | 定时排水阀/排气阀-仪表三通旋塞阀-直角式脉冲电磁阀-永嘉良科阀门有限公司 | 中高频感应加热设备|高频淬火设备|超音频感应加热电源|不锈钢管光亮退火机|真空管烤消设备 - 郑州蓝硕工业炉设备有限公司 | 车充外壳,车载充电器外壳,车载点烟器外壳,点烟器连接头,旅行充充电器外壳,手机充电器外壳,深圳市华科达塑胶五金有限公司 | 压力控制器,差压控制器,温度控制器,防爆压力控制器,防爆温度控制器,防爆差压控制器-常州天利智能控制股份有限公司 | 杭州营业执照代办-公司变更价格-许可证办理流程_杭州福道财务管理咨询有限公司 | 安徽控制器-合肥船用空调控制器-合肥家电控制器-合肥迅驰电子厂 安徽净化板_合肥岩棉板厂家_玻镁板厂家_安徽科艺美洁净科技有限公司 | 带锯机|木工带锯机圆木推台锯|跑车带锯机|河北茂业机械制造有限公司| | IWIS链条代理-ALPS耦合透镜-硅烷预处理剂-上海顶楚电子有限公司 lcd条形屏-液晶长条屏-户外广告屏-条形智能显示屏-深圳市条形智能电子有限公司 | 济南网站策划设计_自适应网站制作_H5企业网站搭建_济南外贸网站制作公司_锐尚 | 印刷人才网 印刷、包装、造纸,中国80%的印刷企业人才招聘选印刷人才网! | 谷歌关键词优化-外贸网站优化-Google SEO小语种推广-思亿欧外贸快车 | 光纤测温-荧光光纤测温系统-福州华光天锐光电科技有限公司 | 聚合氯化铝-碱式氯化铝-聚合硫酸铁-聚氯化铝铁生产厂家多少钱一吨-聚丙烯酰胺价格_河南浩博净水材料有限公司 | led冷热冲击试验箱_LED高低温冲击试验箱_老化试验箱-爱佩百科 | 拖链电缆_柔性电缆_伺服电缆_坦克链电缆-深圳市顺电工业电缆有限公司 | 发光字|标识设计|标牌制作|精神堡垒 - 江苏苏通广告有限公司 | 发光字|标识设计|标牌制作|精神堡垒 - 江苏苏通广告有限公司 | 温控器生产厂家-提供温度开关/热保护器定制与批发-惠州市华恺威电子科技有限公司 | 长沙发电机-湖南发电机-柴油发电机供应厂家-长沙明邦智能科技 | 耐驰泵阀管件制造-耐驰泵阀科技(天津)有限公司 | 精密钢管,冷拔精密无缝钢管,精密钢管厂,精密钢管制造厂家,精密钢管生产厂家,山东精密钢管厂家 | 隧道风机_DWEX边墙风机_SDS射流风机-绍兴市上虞科瑞风机有限公司 | 台式恒温摇床价格_大容量恒温摇床厂家-上海量壹科学仪器有限公司 |