這次帶給大家Vue中slot插槽使用詳解,Vue中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。
總結
其實slots/scoped slots 原理是很簡單的,我們只需明白一點vue在渲染元件時,是根據VNode渲染實際DOM元素的。
slots是將父元件編譯產生的插槽VNode,在渲染子元件時,放置到對應子元件渲染VNode樹。
scoped slots是將父元件中插槽內容編譯成一個函數,在渲染子元件時,傳入子元件props,產生對應的VNode。最後子元件,根據元件render函數傳回VNode節點樹,update渲染真實DOM元素。同時,可以看出跨組件傳遞插槽也是可以的,但必須注意具名插槽傳遞。
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是Vue中slot插槽使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!