wordpress 个人站,网络技术服务合同,宁波专业网站制作,浙江众安建设集团有限公司网站#x1f3ac; 江城开朗的豌豆#xff1a;个人主页 #x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 #x1f4dd; 个人网站 :《 江城开朗的豌豆#x1fadb; 》
⛺️ 生活的理想#xff0c;就是为了理想的生活 ! 目录 ⭐ 专栏简介 #x1f4d8; 文章引言
一、s… 江城开朗的豌豆个人主页 个人专栏 :《 VUE 》 《 javaScript 》 个人网站 :《 江城开朗的豌豆 》
⛺️ 生活的理想就是为了理想的生活 ! 目录 ⭐ 专栏简介 文章引言
一、slot是什么
二、使用场景
三、分类
默认插槽
具名插槽
作用域插槽
小结
四、原理分析
⭐ 写在最后 ⭐ 专栏简介 欢迎来到前端入门之旅这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念并提供实际案例和练习让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具我们都将为你提供丰富的内容和实用技巧帮助你更好地理解并运用前端开发中的各种技术。 同时我们也会关注最新的前端趋势和发展动态。随着Web技术的不断演进前端开发也在不断推陈出新。我们会及时介绍最新的前端框架、工具和技术使你能够站在前沿与时俱进。通过掌握最新的前端技术你将能够在竞争激烈的Web开发领域中有更大的竞争力。 文章引言
一、slot是什么
在HTML中 slot 元素 作为 Web Components 技术套件的一部分是Web组件内的一个占位符
该占位符可以在后期使用自己的标记语言填充
举个例子
template idelement-details-templateslot nameelement-nameSlot template/slot
/template
element-detailsspan slotelement-name1/span
/element-details
element-detailsspan slotelement-name2/span
/element-details
template不会展示到页面中需要用先获取它的引用然后添加到DOM中
customElements.define(element-details,class extends HTMLElement {constructor() {super();const template document.getElementById(element-details-template).content;const shadowRoot this.attachShadow({mode: open}).appendChild(template.cloneNode(true));}
})
在Vue中的概念也是如此
Slot 艺名插槽花名“占坑”我们可以理解为solt在组件模板中占好了位置当使用该组件标签时候组件标签里面的内容就会自动填坑替换组件模板中slot位置作为承载分发内容的出口
可以将其类比为插卡式的FC游戏机游戏机暴露卡槽插槽让用户插入不同的游戏磁条自定义内容
二、使用场景 通过插槽可以让用户可以拓展组件去更好地复用组件和对其做定制化处理 如果父组件在使用到一个复用组件的时候获取这个组件在不同的地方有少量的更改如果去重写组件是一件不明智的事情 通过slot插槽向组件内部指定位置传递内容完成这个复用组件在不同场景的应用 比如布局组件、表格列、下拉选、弹框显示内容等 三、分类
slot可以分来以下三种
默认插槽具名插槽作用域插槽
默认插槽
子组件用slot标签来确定渲染的位置标签里面可以放DOM结构当父组件使用的时候没有往插槽传入内容标签内DOM结构就会显示在页面
父组件在使用的时候直接在子组件的标签内写入内容即可
子组件Child.vue
templateslotp插槽后备的内容/p/slot
/template
父组件
Childdiv默认插槽/div
/Child
具名插槽
子组件用name属性来表示插槽的名字不传为默认插槽
父组件中在使用时在默认插槽的基础上加上slot属性值为子组件插槽name属性值
子组件Child.vue
templateslot插槽后备的内容/slotslot namecontent插槽后备的内容/slot
/template
父组件
childtemplate v-slot:default具名插槽/template!-- 具名插槽⽤插槽名做参数 --template v-slot:content内容.../template
/child
作用域插槽
子组件在作用域上绑定属性来将子组件的信息传给父组件使用这些属性会被挂在父组件v-slot接受的对象上
父组件中在使用时通过v-slot:简写#获取子组件的信息在内容中使用
子组件Child.vue
template slot namefooter testProps子组件的值h3没传footer插槽/h3/slot
/template
父组件
child !-- 把v-slot的值指定为作⽤域上下⽂对象 --template v-slot:defaultslotProps来⾃⼦组件数据{{slotProps.testProps}}/templatetemplate #defaultslotProps来⾃⼦组件数据{{slotProps.testProps}}/template
/child
小结 v-slot属性只能在template上使用但在只有默认插槽时可以在组件标签上使用默认插槽名为default可以省略default直接写v-slot缩写为#时不能不写参数写成#default可以通过解构获取v-slot{user}还可以重命名v-slot{user: newName}和定义默认值v-slot{user 默认值} 四、原理分析
slot本质上是返回VNode的函数一般情况下Vue中的组件要渲染到页面上需要经过template - render function - VNode - DOM 过程这里看看slot如何实现
编写一个buttonCounter组件使用匿名插槽
Vue.component(button-counter, {template: div slot我是默认内容/slot/div
})
使用该组件
new Vue({el: #app,template: button-counterspan我是slot传入内容/span/button-counter,components:{buttonCounter}
})
获取buttonCounter组件渲染函数
(function anonymous(
) {
with(this){return _c(div,[_t(default,[_v(我是默认内容)])],2)}
})
_v表示穿件普通文本节点_t表示渲染插槽的函数
渲染插槽函数renderSlot做了简化
function renderSlot (name,fallback,props,bindObject
) {// 得到渲染插槽内容的函数 var scopedSlotFn this.$scopedSlots[name];var nodes;// 如果存在插槽渲染函数则执行插槽渲染函数生成nodes节点返回// 否则使用默认值nodes scopedSlotFn(props) || fallback;return nodes;
}
name属性表示定义插槽的名字默认值为defaultfallback表示子组件中的slot节点的默认值
关于this.$scopredSlots是什么我们可以先看看vm.slot
function initRender (vm) {...vm.$slots resolveSlots(options._renderChildren, renderContext);...
}
resolveSlots函数会对children节点做归类和过滤处理返回slots
function resolveSlots (children,context) {if (!children || !children.length) {return {}}var slots {};for (var i 0, l children.length; i l; i) {var child children[i];var data child.data;// remove slot attribute if the node is resolved as a Vue slot nodeif (data data.attrs data.attrs.slot) {delete data.attrs.slot;}// named slots should only be respected if the vnode was rendered in the// same context.if ((child.context context || child.fnContext context) data data.slot ! null) {// 如果slot存在(slotheader) 则拿对应的值作为keyvar name data.slot;var slot (slots[name] || (slots[name] []));// 如果是tempalte元素 则把template的children添加进数组中这也就是为什么你写的template标签并不会渲染成另一个标签到页面if (child.tag template) {slot.push.apply(slot, child.children || []);} else {slot.push(child);}} else {// 如果没有就默认是default(slots.default || (slots.default [])).push(child);}}// ignore slots that contains only whitespacefor (var name$1 in slots) {if (slots[name$1].every(isWhitespace)) {delete slots[name$1];}}return slots
}
_render渲染函数通过normalizeScopedSlots得到vm.$scopedSlots
vm.$scopedSlots normalizeScopedSlots(_parentVnode.data.scopedSlots,vm.$slots,vm.$scopedSlots
);
作用域插槽中父组件能够得到子组件的值是因为在renderSlot的时候执行会传入props也就是上述_t第三个参数父组件则能够得到子组件传递过来的值
⭐ 写在最后 请大家不吝赐教,在下方评论或者私信我,十分感谢. ✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式 ✅ 认为我部分代码过于老旧,可以提供新的API或最新语法 ✅ 对于文章中部分内容不理解 ✅ 解答我文章中一些疑问 ✅ 认为某些交互,功能需要优化,发现BUG ✅ 想要添加新功能,对于整体的设计,外观有更好的建议 最后感谢各位的耐心观看既然都到这了点个 赞再走吧
