I have always been interested in slot slots in Vue. Here are some simple understandings of myself. I hope it can help you better understand slot slots.
The following is an example to briefly illustrate the working principle of slots
The template of the dx-li subcomponent is as follows:
<li class="dx-li">
<slot>
Hello！
</slot>
</li>
dx-ulParent component'stemplateas follows：
<ul>
<dx-li>
hello juejin!
</dx-li>
</ul>
Combining the above examples andvueAnalysis of relevant source codes
dx-ulIn parent componenttemplateAfter compilation，Generated componentsrenderfunction：
={
render:function (){
var _vm=this;
var _h=_vm.$createElement;
var _c=_vm._self._c||_h;
// Function where _vm.v creates text VNode for createTextVNode return _c('ul',
[_c('dx-li', [_vm._v("hello juejin!")])],
1)
},
staticRenderFns: []
}
The passed slot content 'hello juejin!' will be compiled into the child node of the dx-li child component VNode node.
Render the dx-li subcomponent, where the render function of the subcomponent:
={
render:function (){
var _vm=this;
var _h=_vm.$createElement;
var _c=_vm._self._c||_h;
// where _vm._v function is renderSlot function return _c('li',
{staticClass: "dx-li" },
[_vm._t("default", [_vm._v("Hello, Nuggets!")])],
2
)
},
staticRenderFns: []
}
During the initialization of the vue instance of the dx-li subcomponent, the initRender function will be called:
function initRender (vm) {
...
// where _renderChildren array is stored as a VNode node of 'hello juejin!'; renderContext is generally a parent component Vue instance Here isdx-ulComponent instance
vm.$slots = resolveSlots(options._renderChildren, renderContext);
...
}
The resolveSlots function is:
/**
* The main function is to convert children VNodes into a slots object.
*/
export function resolveSlots (
children: ?Array<VNode>,
context: ?Component
): { [key: string]: Array<VNode> } {
const slots = {}
// Determine whether there is a child, that is, whether there is a slot VNode if (!children) {
return slots
}
// traversal the child node of the parent component node for (let i = 0, l = ; i < l; i++) {
const child = children[i]
// data is VNodeData, which saves props and attrs passed to child components by parent components const data =
/* Remove slot attribute
* <span slot="abc"></span>
* Compile the VNode node data into span = {attrs:{slot: "abc"}, slot: "abc"}, so delete the slot of the node attrs here
*/
if (data && && ) {
delete
}
/* Determine whether it is a named slot. If it is a named slot, the subcomponent/function subcomponent rendering context is also required. Main functions:
*When a named slot needs to be passed to a subcomponent of a subcomponent, the slot name will not be maintained.
* Give me a chestnut:
* child component template:
* <div>
* <div class="default"><slot></slot></div>
* <div class="named"><slot name="foo"></slot></div>
* </div>
* parent component template:
* <child><slot name="foo"></slot></child>
* main component template:
* <parent><span slot="foo">foo</span></parent>
* The result of main rendering at this time:
* <div>
* <div class="default"><span slot="foo">foo</span></div>
<div class="named"></div>
* </div>
*/
if (( === context || === context) &&
data && != null
) {
const name =
const slot = (slots[name] || (slots[name] = []))
// Here the parent component is handled with the template slot if ( === 'template') {
(slot, || [])
} else {
(child)
}
} else {
// Return anonymous default slot VNode array ( || ( = [])).push(child)
}
}
// Ignore slots that only contain whitespace for (const name in slots) {
if (slots[name].every(isWhitespace)) {
delete slots[name]
}
}
return slots
}
Then when the dx-li component is mounted, the dx-li component render function will be called, and the renderSlot function will be called in the process:
export function renderSlot (
name: string, // The name of slot in the child component, anonymous default fallback: ?Array<VNode>, // The default content VNode array in the subcomponent slot. If there is no slot content, the content will be displayed. props: ?Object, // Props passed to the slot by subcomponents bindObject: ?Object // For <slot v-bind="obj"></slot> obj must be an object ): ?Array<VNode> {
// Determine whether the parent component passes scoped slots const scopedSlotFn = this.$scopedSlots[name]
let nodes
if (scopedSlotFn) { // scoped slot
props = props || {}
if (bindObject) {
if (.NODE_ENV !== 'production' && !isObject(bindObject)) {
warn(
'slot v-bind without argument expects an Object',
this
)
}
props = extend(extend({}, bindObject), props)
}
// Pass in props to generate corresponding VNode nodes = scopedSlotFn(props) || fallback
} else {
// If the parent component does not pass scope slot const slotNodes = this.$slots[name]
// warn duplicate slot usage
if (slotNodes) {
if (.NODE_ENV !== 'production' && slotNodes._rendered) {
warn(
`Duplicate presence of slot "${name}" found in the same render tree ` +
`- this will likely cause render errors.`,
this
)
}
// Set the VNode._rendered of the parent component's pass-through slot, which is used to determine whether there is a duplicate slot later slotNodes._rendered = true
}
// If there is no incoming slot, it is the default slot content VNode nodes = slotNodes || fallback
}
// If you also need to pass slot to the subcomponent of the subcomponent /*Give me a chestnut:
* Bar component: <div class="bar"><slot name="foo"/></div>
* Foo component: <div class="foo"><bar><slot slot="foo"/></bar></div>
* main component: <div><foo>hello</foo></div>
* Final rendering: <div class="foo"><div class="bar">hello</div></div>
*/
const target = props &&
if (target) {
return this.$createElement('template', { slot: target }, nodes)
} else {
return nodes
}
}
scoped slots understanding
The template of the dx-li subcomponent is as follows:
<li class="dx-li">
<slot str="Hello, Nuggets!">
hello juejin!
</slot>
</li>
dx-ulParent component'stemplateas follows：
<ul>
<dx-li>
<span slot-scope="scope">
{{}}
</span>
</dx-li>
</ul>
Combining examples andVueSource code simple scope slot
dx-ulIn parent componenttemplateAfter compilation，Generate componentsrenderfunction：
={
render:function (){
var _vm=this;
var _h=_vm.$createElement;
var _c=_vm._self._c||_h;
return _c('ul', [_c('dx-li', {
// Can compile and generate an array of objects scopedSlots: _vm._u([{
key: "default",
fn: function(scope) {
return _c('span',
{},
[_vm._v(_vm._s())]
)
}
}])
})], 1)
},
staticRenderFns: []
}
Where _vm._u function:
function resolveScopedSlots (
fns, // Be an array of objects, see scopedSlots above res
) {
res = res || {};
for (var i = 0; i < ; i++) {
if ((fns[i])) {
// Recursive call resolveScopedSlots(fns[i], res);
} else {
res[fns[i].key] = fns[i].fn;
}
}
return res
}
The subsequent rendering process of subcomponents is similar to slots. The principle of scoped slots is basically the same as slots. The difference is that when compiling the parent component template, a function that returns the result VNode will be generated. When a child component matches the parent component to pass the scope slot function, the function is called to generate the corresponding VNode.
Summarize
In fact, the principle of slots/scoped slots is very simple. We just need to understand that when vue renders components, it renders the actual DOM elements based on VNode.
slots are slots VNodes generated by compiling the parent component. When rendering the child component, it is placed in the corresponding child component rendering VNode tree.
scoped slots is to compile the slot content in the parent component into a function. When rendering the child component, it passes in the child component props to generate the corresponding VNode. Finally, the child component returns the VNode node tree according to the component render function, and update renders the real DOM element. At the same time, it can be seen that passing slots across components is also possible, but attention must be paid to named slots.