这期内容当中小编将会给大家带来有关Vue中slots与scoped slots有什么不同，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。
专注于为中小企业提供成都网站建设、网站设计服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业达孜免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了成百上千企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。
dx-li子组件的template如下：
你好！
dx-ul父组件的template如下：
结合上述例子以及vue中相关源码进行分析
dx-ul父组件中template编译后，生成的组件render函数：
module.exports={
render:function (){
var _vm=this;
var _h=_vm.$createElement;
var _c=_vm._self._c||_h;
// 其中_vm.v为createTextVNode创建文本VNode的函数
return _c('ul',
[_c('dx-li', [_vm._v("hello juejin!")])],
1)
},
staticRenderFns: []
}
传递的插槽内容'hello juejin!'会被编译成dx-li子组件VNode节点的子节点。
渲染dx-li子组件，其中子组件的render函数：
module.exports={
render:function (){
var _vm=this;
var _h=_vm.$createElement;
var _c=_vm._self._c||_h;
// 其中_vm._v 函数为renderSlot函数
return _c('li',
{staticClass: "dx-li" },
[_vm._t("default", [_vm._v("你好 掘金！")])],
2
)
},
staticRenderFns: []
}初始化dx-li子组件vue实例过程中，会调用initRender函数：
function initRender (vm) {
...
// 其中_renderChildren数组，存储为 'hello juejin!'的VNode节点；renderContext一般为父组件Vue实例
这里为dx-ul组件实例
vm.$slots = resolveSlots(options._renderChildren, renderContext);
...
}其中resolveSlots函数为：
/**
* 主要作用是将children VNodes转化成一个slots对象.
*/
export function resolveSlots (
children: ?Array,
context: ?Component
): { [key: string]: Array } {
const slots = {}
// 判断是否有children，即是否有插槽VNode
if (!children) {
return slots
}
// 遍历父组件节点的孩子节点
for (let i = 0, l = children.length; i < l; i++) {
const child = children[i]
// data为VNodeData，保存父组件传递到子组件的props以及attrs等
const data = child.data
/* 移除slot属性
*
* 编译成span的VNode节点data = {attrs:{slot: "abc"}, slot: "abc"},所以这里删除该节点attrs的slot
*/
if (data && data.attrs && data.attrs.slot) {
delete data.attrs.slot
}
/* 判断是否为具名插槽，如果为具名插槽，还需要子组件/函数子组件渲染上下文一致。主要作用：
*当需要向子组件的子组件传递具名插槽时，不会保持插槽的名字。
* 举个栗子：
* child组件template:
*
*
