淺談Vue插槽實現原理
<!-- 子組件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>二、透過現象看本質
插槽的作用是實現內容分發，實現內容分發，需要兩個條件：
占位符 分發內容組件內部定義的slot標簽，我們可以理解為占位符，父組件中插槽內容，就是要分發的內容。插槽處理本質就是將指定內容放到指定位置。廢話不多說，從本篇文章中，將能了解到：
插槽的實現原理 render方法中如何使用插槽三、實現原理vue組件實例化順序為：父組件狀態初始化(data、computed、watch...) --> 模板編譯 --> 生成render方法 --> 實例化渲染watcher --> 調用render方法，生成VNode --> patch VNode，轉換為真實DOM --> 實例化子組件 --> ......重復相同的流程 --> 子組件生成的真實DOM掛載到父組件生成的真實DOM上，掛載到頁面中 --> 移除舊節點
從上述流程中，可以推測出：
1.父組件模板解析在子組件之前，所以父組件首先會獲取到插槽模板內容
2.子組件模板解析在后，所以在子組件調用render方法生成VNode時，可以借助部分手段，拿到插槽的VNode節點
3.作用域插槽可以獲取子組件內變量，因此作用域插槽的VNode生成，是動態的，即需要實時傳入子組件的作用域scope
整個插槽的處理階段大致分為三步：
編譯 生成渲染模板 生成VNode以下面代碼為例，簡要概述插槽運轉的過程。
<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解析成如下數據結構：
{ 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 123n ')])],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-devsrccorevdomcreate-component.js createComponent方法中，組件實例化調用入口是在vue-devsrccorevdompatch.js createComponent方法中。
七、子組件狀態初始化實例化子組件時，會在initRender -> resolveSlots方法中，將子組件插槽節點掛載到組件作用域vm中，掛載形式為vm.$slots = {slotName: [VNode]}形式。
八、子組件編譯階段子組件在編譯階段，會將slot節點，編譯成以下AST結構：
{ tag: ’h1’, parent: undefined, children: [ { tag: ’slot’, slotName: ''hello'', // ... } ], // ...}九、子組件生成渲染方法
生成的渲染方法如下，其中_t為renderSlot方法的簡寫，從renderSlot方法，我們就可以直觀的將插槽內容與插槽點聯系在一起。
// 渲染方法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 }}
作用域插槽與具名插槽區別
<!-- 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>
作用域插槽與普通插槽相比，主要區別在于插槽內容可以獲取到子組件作用域變量。由于需要注入子組件變量，相比于具名插槽，作用域插槽有以下幾點不同：
作用域插槽在組裝渲染方法時，生成的是一個包含注入作用域的方法，相對于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屬性上。<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、作用域插槽
作用域插槽使用比較靈活，可以注入子組件狀態。作用域插槽 + render方法，對于二次組件封裝作用非常大。舉個栗子，在對ElementUI table組件進行基于JSON數據封裝時，作用域插槽用處就非常大了。
<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 => { // 父組件生成渲染方法中，最終轉換的作用域插槽方法和這種寫法一致 return createElement(’span’, { domProps: {innerText: scope.hello } }) }} }) }, components: { test: {data () { return { hello: ’123’ }},render (createElement) { // 作用域插槽父組件傳遞過來的是function，需要手動調用生成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插槽實現原理的詳細內容，更多關于Vue插槽的資料請關注好吧啦網其它相關文章！
相關文章：
網公網安備