面试官：说说你对slot的理解？slot使用场景有哪些？

梦里梦外; 2022-12-28 08:30 135阅读 0赞

![format_png][]

## 一、slot是什么 ##

在HTML中 `slot` 元素 ，作为 `Web Components` 技术套件的一部分，是Web组件内的一个占位符

该占位符可以在后期使用自己的标记语言填充

举个栗子

<template id="element-details-template">
      <slot name="element-name">Slot template</slot>
    </template>
    <element-details>
      <span slot="element-name">1</span>
    </element-details>
    <element-details>
      <span slot="element-name">2</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游戏机，游戏机暴露卡槽（插槽）让用户插入不同的游戏磁条（自定义内容）

放张图感受一下![format_png 1][]

## 二、使用场景 ##

通过插槽可以让用户可以拓展组件，去更好地复用组件和对其做定制化处理

如果父组件在使用到一个复用组件的时候，获取这个组件在不同的地方有少量的更改，如果去重写组件是一件不明智的事情

通过`slot`插槽向组件内部指定位置传递内容，完成这个复用组件在不同场景的应用

比如布局组件、表格列、下拉选、弹框显示内容等

## 三、分类 ##

`slot`可以分来以下三种：

*  默认插槽
 *  具名插槽
 *  作用域插槽

### 默认插槽 ###

子组件用`<slot>`标签来确定渲染的位置，标签里面可以放`DOM`结构，当父组件使用的时候没有往插槽传入内容，标签内`DOM`结构就会显示在页面

父组件在使用的时候，直接在子组件的标签内写入内容即可

子组件`Child.vue`

<template>
        <slot>
          <p>插槽后备的内容</p>
        </slot>
    </template>

父组件

### 具名插槽 ###

子组件用`name`属性来表示插槽的名字，不传为默认插槽

父组件中在使用时在默认插槽的基础上加上`slot`属性，值为子组件插槽`name`属性值

子组件`Child.vue`

<template>
        <slot>插槽后备的内容</slot>
      <slot name="content">插槽后备的内容</slot>
    </template>

父组件

### 作用域插槽 ###

子组件在作用域上绑定属性来将子组件的信息传给父组件使用，这些属性会被挂在父组件`v-slot`接受的对象上

父组件中在使用时通过`v-slot:`（简写：\#）获取子组件的信息，在内容中使用

子组件`Child.vue`

<template> 
      <slot name="footer" testProps="子组件的值">
              <h3>没传footer插槽</h3>
        </slot>
    </template>

父组件

<child> 
        
        <template v-slot:default="slotProps">
          来⾃⼦组件数据：{
        {slotProps.testProps}}
        </template>
      <template #default="slotProps">
          来⾃⼦组件数据：{
        {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-counter><span>我是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`属性表示定义插槽的名字，默认值为`default`，`fallback`表示子组件中的`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 node
          if (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存在(slot="header") 则拿对应的值作为key
            var 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 whitespace
        for (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`第三个参数，父组件则能够得到子组件传递过来的值

## 参考文献 ##

*  https://juejin.cn/post/6844903817746628615\#heading-4
 *  https://developer.mozilla.org/en-US/docs/Web/Web\_Components/Using\_templates\_and\_slots
 *  https://vue3js.cn/docs/zh
 *  https://segmentfault.com/a/1190000019492734?utm\_source=tag-newest

面试官VUE系列总进度：15／33

[面试官：SPA（单页应用）首屏加载速度慢怎么解决？][SPA]

[面试官：Vue中组件和插件有什么区别？][Vue]

[面试官：为什么data属性是一个函数而不是一个对象？][data]

[面试官：Vue中给对象添加新属性界面不刷新?][Vue 1]

[面试官：Vue实例挂载的过程中发生了什么?][Vue 2]

[面试官：Vue中的$nextTick怎么理解?][Vue_nextTick]

[面试官：说说你对vue的mixin的理解，有哪些应用场景？][vue_mixin]

篇副有限，扫下方二维码查看往期

![format_png 2][]

[format_png]: /images/20221120/7b67f575d8264af7895712b3ebf4b0f2.png
[format_png 1]: /images/20221120/281ad974cb4449328a690c045ddafed3.png
[SPA]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c122cb674834677de9dea791c9f956ad8c5121b007586c25fb11bc07910f47a6ffb99176&idx=1&mid=2247484276&scene=21&sn=7a980dd7db86f0194b802b815913cff2#wechat_redirect
[Vue]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c1d2cb6748c4a2d60835488346cf74848078a9b488e4e84d1be0dcfc1ccce3a4bc958209&idx=1&mid=2247484292&scene=21&sn=76ff2903942ce748b58e9339997b7969#wechat_redirect
[data]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c1c1cb6748d71afec432e36448c4e1febe37c4f9f43e566ebb613ea680ab2a7e863f7880&idx=1&mid=2247484311&scene=21&sn=970d4a092c5dc09c5d427ce2efad8bea#wechat_redirect
[Vue 1]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c1f5cb6748e39b862cb3f3327676a4502c2f2f658a28cf949a5f19bae62ea347559d23fb&idx=1&mid=2247484323&scene=21&sn=c2b5b9dd96fe17e62d9facc95cd1b534#wechat_redirect
[Vue 2]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c1e5cb6748f3511e98045534c4631c86b13c5f2f6de0290ba7b992913127070090a02e7b&idx=1&mid=2247484339&scene=21&sn=4ce6450e946dc44230ab99934396db10#wechat_redirect
[Vue_nextTick]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c19ecb674888b80b27c2b7e8bde37c81150ba417613037d7811ffd1cdd33610f63686892&idx=1&mid=2247484360&scene=21&sn=d505ec934b88d7108cac139b3b047024#wechat_redirect
[vue_mixin]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c18dcb67489bcc89f4ba25b2ac35fd6e589b8ab40e2118ba043554ad2cc4053ab2dd3b92&idx=1&mid=2247484379&scene=21&sn=d50794bbaa957339a92b7e4b58acd5e8#wechat_redirect
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9nSDMxdUY5VklpYlJBRWlibkFlaWJFQXJKNG1Hd3ZrUnZZQ1BXWW16WEU2eVVMbTJYSFhYZGxSWmNreEV0a003S0FGZm1MNW1hQVVMdXNGR1BpYmVncjdRY2cvNjQw?x-oss-process=image/format,png