深入理解vue slot插槽

秒速五厘米 2022-05-21 03:27 161阅读 0赞

## 单个插槽 ##

只使用这个标签的话，可以将父组件放在子组件的内容，放到想让他显示的地方

## 具名插槽 ##

将放在子组件里的不同html标签放在不同的位置  
父组件在要分发的标签里添加 slot=’name’ 属性  
子组件在对应分发的位置的slot标签里，添加name=’name’ 属性，  
然后就会将对应的标签放在对应的位置了

![这里写图片描述][70]

案例地址：[http://dotwe.org/vue/e639fd36e7af82cce248ef835fa5d761][http_dotwe.org_vue_e639fd36e7af82cce248ef835fa5d761]  
从案例里面知道, 可以多次定义具名slot的内容，内容会被按顺序append到插槽中。未指定slot值的元素会被append到匿名插槽中。

## Vue slot 原理 ##

在`web-components`中有slot的概念，[https://developers.google.com/web/fundamentals/web-components/shadowdom][https_developers.google.com_web_fundamentals_web-components_shadowdom]。

`<slot>` 元素  
Shadow DOM 使用 `<slot>` 元素将不同的 DOM 树组合在一起。Slot 是组件内部的占位符，用户*可以*使用自己的标记来填充。

通过定义一个或多个 slot，您可将外部标记引入到组件的 shadow DOM 中进行渲染。 这相当于您在说“在此处渲染用户的标记”。

注：Slot 是为网络组件创建“声明性 API”的一种方法。它们混入到用户的 DOM 中，帮助对整个组件进行渲染，从而将不同的 DOM 树组合在一起。

如果 `<slot>` 引入了元素，则这些元素可“跨越” shadow DOM 的边界。 这些元素称为分布式节点。从概念上来看，分布式节点似乎有点奇怪。 Slot 实际上并不移动 DOM；它们在 shadow DOM 内部的其他位置进行渲染。

组件可在其 shadow DOM 中定义零个或多个 slot。Slot 可以为空，或者提供回退内容。 如果用户不提供 light DOM 内容，slot 将对其备用内容进行渲染。

<slot></slot>
    
    <slot>Fancy button</slot> 
    
    <slot> 
      <h2>Title</h2>
      <summary>Description text</summary>
    </slot>

您还可以创建已命名 slot。已命名 slot 是 shadow DOM 中用户可通过名称引用的特定槽。

例如 - `<fancy-tabs> shadow DOM` 中的已命名 slot：

#shadow-root
      <div id="tabs">
        <slot id="tabsSlot" name="title"></slot>
      </div>
      <div id="panels">
        <slot id="panelsSlot"></slot>
      </div>
    组件用户对 <fancy-tabs> 的声明类似于：
    
    <fancy-tabs>
      <button slot="title">Title</button>
      <button slot="title" selected>Title 2</button>
      <button slot="title">Title 3</button>
      <section>content panel 1</section>
      <section>content panel 2</section>
      <section>content panel 3</section>
    </fancy-tabs>
    
    
    <fancy-tabs>
      <h2 slot="title">Title</h2>
      <section>content panel 1</section>
      <h2 slot="title" selected>Title 2</h2>
      <section>content panel 2</section>
      <h2 slot="title">Title 3</h2>
      <section>content panel 3</section>
    </fancy-tabs>

而且如果您很好奇，您会发现扁平树看起来类似于：

<fancy-tabs>
      #shadow-root
        <div id="tabs">
          <slot id="tabsSlot" name="title">
            <button slot="title">Title</button>
            <button slot="title" selected>Title 2</button>
            <button slot="title">Title 3</button>
          </slot>
        </div>
        <div id="panels">
          <slot id="panelsSlot">
            <section>content panel 1</section>
            <section>content panel 2</section>
            <section>content panel 3</section>
          </slot>
        </div>
    </fancy-tabs>

注意，我们的组件可处理不同的配置，但是扁平的 DOM 树保持不变。 我们还可以从 `<button>` 切换到 `<h2>`。 编写此组件的目的在于处理不同类型的子项 - 如同 `<select>` 一样。

通过vue的渲染过程，可以看出slot渲染的原理  
vm对象的$slots 会存储组件的所有插槽的vdom, 主要通过解析children，如果子组件指定了插槽名，会将vdom push 到对应名称的数组中，否则会push到default的数组中。

// 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
    ) {
      const name = data.slot
      const slot = (slots[name] || (slots[name] = []))
      if (child.tag === 'template') {
        slot.push.apply(slot, child.children || [])
      } else {
        slot.push(child)
      }
    } else {
      (slots.default || (slots.default = [])).push(child)
    }

具体可以参看vue源码中的resolve-slots过程

[https://github.com/vuejs/vue/blob/dev/src/core/instance/render-helpers/resolve-slots.js\#L17][https_github.com_vuejs_vue_blob_dev_src_core_instance_render-helpers_resolve-slots.js_L17]

那么创建DOM的过程就可以通过名称拿到具体组件：

// 单个插槽（匿名插槽）
    this.$slots['default'];
    // 具名插槽
    this.$slots[slotName]

[70]: /images/20220521/4d2ccb8406c345988d6ae602335f7665.png
[http_dotwe.org_vue_e639fd36e7af82cce248ef835fa5d761]: http://dotwe.org/vue/e639fd36e7af82cce248ef835fa5d761
[https_developers.google.com_web_fundamentals_web-components_shadowdom]: https://developers.google.com/web/fundamentals/web-components/shadowdom
[https_github.com_vuejs_vue_blob_dev_src_core_instance_render-helpers_resolve-slots.js_L17]: https://github.com/vuejs/vue/blob/dev/src/core/instance/render-helpers/resolve-slots.js#L17