Vue 插槽 (Slots) 源码解析与用法

╰半夏微凉° 2024-04-20 12:07 70阅读 0赞

**聚沙成塔·每天进步一点点**

#### 本文内容 ####

*  ⭐ 专栏简介
 *   *  1. 默认插槽的实现原理
     *   *  用法示例：
     *  2. 具名插槽的实现原理
     *   *  用法示例：
     *  3. 作用域插槽的实现原理
     *   *  用法示例：
 *  ⭐ 写在最后

## ⭐ 专栏简介 ##

**Vue学习之旅的奇妙世界** 欢迎大家来到 Vue 技能树参考资料专栏！创建这个专栏的初衷是为了帮助大家更好地应对 Vue.js 技能树的学习。每篇文章都致力于提供清晰、深入的参考资料，让你能够更轻松、更自信地理解和掌握 Vue.js 的核心概念和技术。订阅这个专栏，让我们一同踏上更深入的 Vue学习之旅！为你的前端技能树添砖加瓦！

![在这里插入图片描述][a5e6aa42c7844913a798169ab9707994.png_pic_center]

--------------------

插槽是 Vue 中一项强大且灵活的特性，其实现涉及到 Vue 的编译和渲染过程。在了解其实现原理的同时，我们将深入探讨默认插槽、具名插槽以及作用域插槽的实际用法。

### 1. 默认插槽的实现原理 ###

默认插槽的实现涉及到 `render` 函数和虚拟 DOM 的创建。在子组件的 `render` 函数中，可以通过 `this.$slots.default` 访问默认插槽的内容。实际上，`$slots` 是在 Vue 实例的 `_render` 方法中初始化的，它是一个包含了当前组件所有插槽的对象。

#### 用法示例： ####

<template>
      <div>
        <h2>组件标题</h2>
        <slot></slot>
      </div>
    </template>
    
    
    <template>
      <div>
        <my-component>
          <p>这是插入的内容。</p>
        </my-component>
      </div>
    </template>
    
    <script>
    export default {
      // ...其他配置
      render(h) {
        return h('div', [
          h('h2', '组件标题'),
          this.$slots.default // 默认插槽的内容
        ]);
      }
    }
    </script>

### 2. 具名插槽的实现原理 ###

具名插槽的实现与默认插槽类似，不同之处在于可以通过具体的插槽名称访问对应的内容。在子组件的 `render` 函数中，可以通过 `this.$slots[name]` 访问具名插槽。

#### 用法示例： ####

<template>
      <div>
        <header>
          <slot name="header"></slot>
        </header>
        <main>
          <slot></slot>
        </main>
        <footer>
          <slot name="footer"></slot>
        </footer>
      </div>
    </template>
    
    
    <template>
      <div>
        <my-component>
          <template v-slot:header>
            <h2>这是头部</h2>
          </template>
          <p>这是主要内容。</p>
          <template v-slot:footer>
            <p>这是底部</p>
          </template>
        </my-component>
      </div>
    </template>
    
    <script>
    export default {
      // ...其他配置
      render(h) {
        return h('div', [
          h('header', this.$slots.header), // 具名插槽的内容
          h('main', this.$slots.default),  // 默认插槽的内容
          h('footer', this.$slots.footer)  // 具名插槽的内容
        ]);
      }
    }
    </script>

通过这些示例，我们不仅深入理解了默认插槽和具名插槽的用法，还了解了其在 Vue 源码中的实现原理。

### 3. 作用域插槽的实现原理 ###

作用域插槽允许子组件向父组件传递数据。通过在插槽上使用 `v-slot` 并指定一个变量，可以在父组件中访问子组件的数据。

#### 用法示例： ####

<template>
      <div>
        <ul>
          <li v-for="item in items" :key="item.id">
            
            <slot :item="item"></slot>
          </li>
        </ul>
      </div>
    </template>
    
    
    <template>
      <div>
        <my-component>
          
          <template v-slot="{ item }">
            <p>{
       { item.name }}</p>
          </template>
        </my-component>
      </div>
    </template>
    
    <script>
    export default {
      // ...其他配置
      render(h) {
        return h('div', [
          h('ul', this.items.map(item => 
            h('li', [
              // 作用域插槽的内容
              this.$scopedSlots.default({ item })
            ])
          ))
        ]);
      }
    }
    </script>

在这个例子中，通过 `v-slot="{ item }"` 将子组件中的 `items` 数组的每一项传递给父组件，然后在父组件中使用 `{ { item.name }}` 显示每个项的名称。通过这些实例，我们全面了解了默认插槽、具名插槽和作用域插槽的用法，并深入理解了其在 Vue 源码中的实现原理。

--------------------

## ⭐ 写在最后 ##

欢迎来到《Vue技能树专栏》！本专栏旨在帮助您全面深入地掌握Vue.js，一款现代、灵活且强大的JavaScript框架。无论您是初学者还是有一定经验的开发者，这里都将为您提供详细的指导、实用的技巧以及深入的理解，助您在Vue.js世界中游刃有余。如果文中出现有瑕疵的地方各位可以通过主页的左侧联系我指正，我们一起进步，

[a5e6aa42c7844913a798169ab9707994.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/17ed7e5177b84ac1a599a1c8c0a9cf54.png