| 面试官：说说你对slot的理解？slot使用场景有哪些？ | 您所在的位置：网站首页 › vueslot原理 › 面试官：说说你对slot的理解？slot使用场景有哪些？ |
面试官：说说你对slot的理解？slot使用场景有哪些？
|
# 面试官：说说你对slot的理解？slot使用场景有哪些？
在HTML中 slot 元素 ，作为 Web Components 技术套件的一部分，是Web组件内的一个占位符 该占位符可以在后期使用自己的标记语言填充 举个栗子 Slot template 1 2 123456789template不会展示到页面中，需要用先获取它的引用，然后添加到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)); } }) 1234567891011在Vue中的概念也是如此 Slot 艺名插槽，花名“占坑”，我们可以理解为solt在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑（替换组件模板中slot位置），作为承载分发内容的出口 可以将其类比为插卡式的FC游戏机，游戏机暴露卡槽（插槽）让用户插入不同的游戏磁条（自定义内容） 放张图感受一下
通过插槽可以让用户可以拓展组件，去更好地复用组件和对其做定制化处理 如果父组件在使用到一个复用组件的时候，获取这个组件在不同的地方有少量的更改，如果去重写组件是一件不明智的事情 通过slot插槽向组件内部指定位置传递内容，完成这个复用组件在不同场景的应用 比如布局组件、表格列、下拉选、弹框显示内容等 # 三、分类slot可以分来以下三种： 默认插槽 具名插槽 作用域插槽 # 默认插槽子组件用标签来确定渲染的位置，标签里面可以放DOM结构，当父组件使用的时候没有往插槽传入内容，标签内DOM结构就会显示在页面 父组件在使用的时候，直接在子组件的标签内写入内容即可 子组件Child.vue 插槽后备的内容 12345父组件 默认插槽 123# 具名插槽子组件用name属性来表示插槽的名字，不传为默认插槽 父组件中在使用时在默认插槽的基础上加上slot属性，值为子组件插槽name属性值 子组件Child.vue 插槽后备的内容 插槽后备的内容 1234父组件 具名插槽 内容... 12345# 作用域插槽子组件在作用域上绑定属性来将子组件的信息传给父组件使用，这些属性会被挂在父组件v-slot接受的对象上 父组件中在使用时通过v-slot:（简写：#）获取子组件的信息，在内容中使用 子组件Child.vue 没传footer插槽 12345父组件 来⾃⼦组件数据：{{slotProps.testProps}} 来⾃⼦组件数据：{{slotProps.testProps}} 123456789# 小结： v-slot属性只能在上使用，但在只有默认插槽时可以在组件标签上使用 默认插槽名为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: ' 我是默认内容' }) 123使用该组件 new Vue({ el: '#app', template: '我是slot传入内容', components:{buttonCounter} }) 12345获取buttonCounter组件渲染函数 (function anonymous( ) { with(this){return _c('div',[_t("default",[_v("我是默认内容")])],2)} }) 1234_v表示穿件普通文本节点，_t表示渲染插槽的函数 渲染插槽函数renderSlot（做了简化） function renderSlot ( name, fallback, props, bindObject ) { // 得到渲染插槽内容的函数 var scopedSlotFn = this.$scopedSlots[name]; var nodes; // 如果存在插槽渲染函数，则执行插槽渲染函数，生成nodes节点返回 // 否则使用默认值 nodes = scopedSlotFn(props) || fallback; return nodes; } 1234567891011121314name属性表示定义插槽的名字，默认值为default，fallback表示子组件中的slot节点的默认值 关于this.$scopredSlots是什么，我们可以先看看vm.slot function initRender (vm) { ... vm.$slots = resolveSlots(options._renderChildren, renderContext); ... } 12345resolveSlots函数会对children节点做归类和过滤处理，返回slots function resolveSlots ( children, context ) { if (!children || !children.length) { return {} } var slots = {}; for (var i = 0, l = children.length; i← 说说你对vue的mixin的理解，有什么应用场景？ Vue.observable你有了解过吗？说说看 → |
【本文地址】