这次给大家带来实战项目中使用vue内slots/scoped slots，实战项目中使用vue内slots/scoped slots的注意事项有哪些，下面就是实战案例，一起来看一下。
一直对vue中的slot插槽比较感兴趣，下面是自己的一些简单理解，希望可以帮助大家更好的理解slot插槽
下面结合一个例子，简单说明slots的工作原理
dx-li子组件的template如下：
<li class="dx-li"> <slot>   你好！ </slot></li>dx-ul父组件的template如下：<ul> <dx-li>  hello juejin! </dx-li></ul>结合上述例子以及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<vnode>, context: ?component): { [key: string]: array<vnode> } { 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 slot="abc"></span>  * 编译成span的vnode节点data = {attrs:{slot: abc}, slot: abc},所以这里删除该节点attrs的slot */ if (data && data.attrs && data.attrs.slot) {  delete data.attrs.slot } /* 判断是否为具名插槽，如果为具名插槽，还需要子组件/函数子组件渲染上下文一致。主要作用： *当需要向子组件的子组件传递具名插槽时，不会保持插槽的名字。 * 举个栗子： * child组件template:  * <p> * <p class="default"><slot></slot></p> * <p class="named"><slot name="foo"></slot></p> * </p> * parent组件template: * <child><slot name="foo"></slot></child> * main组件template: * <parent><span slot="foo">foo</span></parent> * 此时main渲染的结果： * <p> * <p class="default"><span slot="foo">foo</span></p>   <p class="named"></p> * </p> */ if ((child.context === context || child.fncontext === context) &&  data && data.slot != null ) {  const name = data.slot  const slot = (slots[name] || (slots[name] = []))  // 这里处理父组件采用template形式的插槽  if (child.tag === 'template') {  slot.push.apply(slot, child.children || [])  } else {  slot.push(child)  } } else {  // 返回匿名default插槽vnode数组  (slots.default || (slots.default = [])).push(child) } } // 忽略仅仅包含whitespace的插槽 for (const name in slots) { if (slots[name].every(iswhitespace)) {  delete slots[name] } } return slots}
然后挂载dx-li组件时，会调用dx-li组件render函数，在此过程中会调用renderslot函数：
export function renderslot (  name: string, // 子组件中slot的name，匿名default  fallback: ?array<vnode>, // 子组件插槽中默认内容vnode数组，如果没有插槽内容，则显示该内容  props: ?object, // 子组件传递到插槽的props  bindobject: ?object // 针对<slot v-bind="obj"></slot> obj必须是一个对象 ): ?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)  }  // 传入props生成相应的vnode  nodes = scopedslotfn(props) || fallback  } else {  // 如果父组件没有传递作用域插槽  const slotnodes = this.$slots[name]  // warn duplicate slot usage  if (slotnodes) {   if (process.env.node_env !== 'production' && slotnodes._rendered) {   warn(    `duplicate presence of slot ${name} found in the same render tree ` +    `- this will likely cause render errors.`,    this   )   }   // 设置父组件传递插槽的vnode._rendered，用于后面判断是否有重名slot   slotnodes._rendered = true  }  // 如果没有传入插槽，则为默认插槽内容vnode  nodes = slotnodes || fallback  }  // 如果还需要向子组件的子组件传递slot  /*举个栗子：  * bar组件: <p class="bar"><slot name="foo"/></p>  * foo组件：<p class="foo"><bar><slot slot="foo"/></bar></p>  * main组件：<p><foo>hello</foo></p>  * 最终渲染：<p class="foo"><p class="bar">hello</p></p>  */  const target = props && props.slot  if (target) {  return this.$createelement('template', { slot: target }, nodes)  } else {  return nodes  } }
scoped slots理解
dx-li子组件的template如下：
<li class="dx-li">  <slot str="你好 掘金！">  hello juejin! </slot></li>dx-ul父组件的template如下：<ul> <dx-li>  <span slot-scope="scope">   {{scope.str}}  </span> </dx-li></ul>结合例子和vue源码简单作用域插槽dx-ul父组件中template编译后，产生组件render函数：module.exports={ render:function (){  var _vm=this;  var _h=_vm.$createelement;  var _c=_vm._self._c||_h;   return _c('ul', [_c('dx-li', {   // 可以编译生成一个对象数组   scopedslots: _vm._u([{    key: default,    fn: function(scope) {    return _c('span',      {},     [_vm._v(_vm._s(scope.str))]    )    }   }])   })], 1)  }, staticrenderfns: [] }
其中 _vm._u函数：
function resolvescopedslots ( fns, // 为一个对象数组，见上文scopedslots res) { res = res || {}; for (var i = 0; i < fns.length; i++) {  if (array.isarray(fns[i])) {   // 递归调用   resolvescopedslots(fns[i], res);  } else {   res[fns[i].key] = fns[i].fn;  } } return res}
子组件的后续渲染过程与slots类似。scoped slots原理与slots基本是一致，不同的是编译父组件模板时，会生成一个返回结果为vnode的函数。当子组件匹配到父组件传递作用域插槽函数时，调用该函数生成对应vnode。
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
怎样使用vue做出单页应用前端路由
本地环境操作node服务器跨域用法总结
以上就是实战项目中使用vue内slots/scoped slots的详细内容。