溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“Vue插槽的實現原理是什么”，在日常操作中，相信很多人在Vue插槽的實現原理是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Vue插槽的實現原理是什么”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
一、樣例代碼
二、透過現象看本質
三、實現原理
四、父組件編譯階段
五、父組件生成渲染方法
六、父組件生成VNode
七、子組件狀態初始化
八、子組件編譯階段
九、子組件生成渲染方法
十、使用技巧
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>插槽的作用是實現內容分發，實現內容分發，需要兩個條件：
占位符
分發內容
組件內部定義的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: '<h2>' +
'<slot name="hello"></slot>' +
'</h2>'
}
}
})
</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 123\n ")])],2)
],
1)
}調用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<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: '<h2>' +
'<slot name="hello" :hello="hello"></slot>' +
'</h2>'
}
}
})
</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方法中，我們插槽的使用方法如下：
插槽處理一般分為兩塊：
父組件：父組件只需要寫成模板編譯成的渲染方法即可，即指定插槽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('h4', {
slot: 'hello',
domProps: {
innerText: '123'
}
})
])
},
components: {
test: {
render(createElement) {
return createElement('h2', [ this.$slots.hello ]);
}
// template: '<h2>' +
// '<slot name="hello"></slot>' +
// '</h2>'
}
}
}).$mount('#app')
</script>作用域插槽使用比較靈活，可以注入子組件狀態。作用域插槽 + 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('h2', [ slotVnode ])
}
// template: '<h2>' +
// '<slot name="hello" :hello="hello"></slot>' +
// '</h2>'
}
}
}).$mount('#app')
</script>到此，關于“Vue插槽的實現原理是什么”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
