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

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

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

瀏覽:112日期:2022-09-28 14:42:01
目錄一、樣例代碼二、透過現(xiàn)象看本質(zhì)三、實(shí)現(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>這是默認(rèn)插槽</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ì)

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

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

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

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

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

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

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

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

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

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

編譯 生成渲染模板 生成VNode

以下面代碼為例,簡要概述插槽運(yùn)轉(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é)點(diǎn),即文本節(jié)點(diǎn)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配置項(xiàng) attrs: { id: ’#app’ } }, context: componentContext, // 組件作用域 elm: undefined, // 真實(shí)DOM元素 children: [ { tag: ’vue-component-1-test’, children: undefined, // 組件為頁面最小組成單元,插槽內(nèi)容放放到子組件中解析 parent: undefined, componentOptions: { // 組件配置項(xiàng)Ctor: VueComponentCtor, // 組件構(gòu)造方法data: { hook: { init: fn, // 實(shí)例化組件調(diào)用方法 insert: fn, prepatch: fn, destroy: fn }, scopedSlots: { // 作用域插槽配置項(xiàng),用于生成作用域插槽VNode slotName: slotFn }},children: [ // 組件插槽節(jié)點(diǎn) 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方法中,組件實(shí)例化調(diào)用入口是在vue-devsrccorevdompatch.js createComponent方法中。

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

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

八、子組件編譯階段

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

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

生成的渲染方法如下,其中_t為renderSlot方法的簡寫,從renderSlot方法,我們就可以直觀的將插槽內(nèi)容與插槽點(diǎn)聯(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)容可以獲取到子組件作用域變量。由于需要注入子組件變量,相比于具名插槽,作用域插槽有以下幾點(diǎn)不同:

作用域插槽在組裝渲染方法時,生成的是一個包含注入作用域的方法,相對于createElement生成VNode,多了一層注入作用域方法包裹,這也就決定插槽VNode作用域插槽是在子組件生成VNode時生成,而具名插槽是在父組件創(chuàng)建VNode時生成。_u為resolveScopedSlots,其作用為將節(jié)點(diǎn)配置項(xiàng)轉(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é)點(diǎn),掛載到組件$slots中,作用域插槽則在renderSlot中直接被調(diào)用

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

十、使用技巧

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

10.1、具名插槽

插槽處理一般分為兩塊:

父組件:父組件只需要寫成模板編譯成的渲染方法即可,即指定插槽slot名稱 子組件:由于子組件時直接拿父組件初始化階段生成的VNode,所以子組件只需要將slot標(biāo)簽替換為父組件生成的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組件進(jìn)行基于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插槽實(shí)現(xiàn)原理的詳細(xì)內(nèi)容,更多關(guān)于Vue插槽的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章!

標(biāo)簽: Vue
相關(guān)文章:
主站蜘蛛池模板: 二氧化碳/活性炭投加系统,次氯酸钠发生器,紫外线消毒设备|广州新奥 | 带锯机|木工带锯机圆木推台锯|跑车带锯机|河北茂业机械制造有限公司| | 视觉检测设备_自动化检测设备_CCD视觉检测机_外观缺陷检测-瑞智光电 | 建大仁科-温湿度变送器|温湿度传感器|温湿度记录仪_厂家_价格-山东仁科 | 软启动器-上海能曼电气有限公司 真空搅拌机-行星搅拌机-双行星动力混合机-广州市番禺区源创化工设备厂 | 乐泰胶水_loctite_乐泰胶_汉高乐泰授权(中国)总代理-鑫华良供应链 | 欧美日韩国产一区二区三区不_久久久久国产精品无码不卡_亚洲欧洲美洲无码精品AV_精品一区美女视频_日韩黄色性爱一级视频_日本五十路人妻斩_国产99视频免费精品是看4_亚洲中文字幕无码一二三四区_国产小萍萍挤奶喷奶水_亚洲另类精品无码在线一区 | 高博医疗集团上海阿特蒙医院| 展厅装修公司|企业展厅设计|展厅制作|展厅搭建—广州展厅装饰公司 | 智成电子深圳tdk一级代理-提供TDK电容电感贴片蜂鸣器磁芯lambda电源代理经销,TDK代理商有哪些TDK一级代理商排名查询。-深圳tdk一级代理 | 丙烷/液氧/液氮气化器,丙烷/液氧/液氮汽化器-无锡舍勒能源科技有限公司 | 芜湖厨房设备_芜湖商用厨具_芜湖厨具设备-芜湖鑫环厨具有限公司 控显科技 - 工控一体机、工业显示器、工业平板电脑源头厂家 | 培训中心-翰香原香酥板栗饼加盟店总部-正宗板栗酥饼技术 | 沈阳真空机_沈阳真空包装机_沈阳大米真空包装机-沈阳海鹞真空包装机械有限公司 | 佛山商标注册_商标注册代理|专利注册申请_商标注册公司_鸿邦知识产权 | 护腰带生产厂家_磁石_医用_热压护腰_登山护膝_背姿矫正带_保健护具_医疗护具-衡水港盛 | 国际船舶网 - 船厂、船舶、造船、船舶设备、航运及海洋工程等相关行业综合信息平台 | 华禹护栏|锌钢护栏_阳台护栏_护栏厂家-华禹专注阳台护栏、楼梯栏杆、百叶窗、空调架、基坑护栏、道路护栏等锌钢护栏产品的生产销售。 | 欧美日韩国产一区二区三区不_久久久久国产精品无码不卡_亚洲欧洲美洲无码精品AV_精品一区美女视频_日韩黄色性爱一级视频_日本五十路人妻斩_国产99视频免费精品是看4_亚洲中文字幕无码一二三四区_国产小萍萍挤奶喷奶水_亚洲另类精品无码在线一区 | 安徽净化板_合肥岩棉板厂家_玻镁板厂家_安徽科艺美洁净科技有限公司 | 智能化的检漏仪_气密性测试仪_流量测试仪_流阻阻力测试仪_呼吸管快速检漏仪_连接器防水测试仪_车载镜头测试仪_奥图自动化科技 | 温湿度记录纸_圆盘_横河记录纸|霍尼韦尔记录仪-广州汤米斯机电设备有限公司 | 冷却塔厂家_冷却塔维修_冷却塔改造_凉水塔配件填料公司- 广东康明节能空调有限公司 | 热工多功能信号校验仪-热电阻热电偶校验仿真仪-金湖虹润仪表 | 二次元影像仪|二次元测量仪|拉力机|全自动影像测量仪厂家_苏州牧象仪器 | 活性氧化铝|无烟煤滤料|活性氧化铝厂家|锰砂滤料厂家-河南新泰净水材料有限公司 | 铸钢件厂家-铸钢齿轮-减速机厂家-淄博凯振机械有限公司 | 电加热导热油炉-空气加热器-导热油加热器-翅片电加热管-科安达机械 | 华东师范大学在职研究生招生网_在职研究生招生联展网 | 铸铝门厂家,别墅大门庭院大门,别墅铸铝门铜门[十大品牌厂家]军强门业 | 智能化的检漏仪_气密性测试仪_流量测试仪_流阻阻力测试仪_呼吸管快速检漏仪_连接器防水测试仪_车载镜头测试仪_奥图自动化科技 | pbootcms网站模板|织梦模板|网站源码|jquery建站特效-html5模板网 | 蓝莓施肥机,智能施肥机,自动施肥机,水肥一体化项目,水肥一体机厂家,小型施肥机,圣大节水,滴灌施工方案,山东圣大节水科技有限公司官网17864474793 | 罐体电伴热工程-消防管道电伴热带厂家-山东沃安电气 | 恒温恒湿试验箱_高低温试验箱_恒温恒湿箱-东莞市高天试验设备有限公司 | 成都热收缩包装机_袖口式膜包机_高速塑封机价格_全自动封切机器_大型套膜机厂家 | CCE素质教育博览会 | CCE素博会 | 教育展 | 美育展 | 科教展 | 素质教育展 | 工控机,嵌入式主板,工业主板,arm主板,图像采集卡,poe网卡,朗锐智科 | 二手光谱仪维修-德国OBLF光谱仪|进口斯派克光谱仪-热电ARL光谱仪-意大利GNR光谱仪-永晖检测 | 米顿罗计量泵(科普)——韬铭机械| 东莞猎头公司_深圳猎头公司_广州猎头公司-广东万诚猎头提供企业中高端人才招聘服务 |