vue中的slot

在Vue.js中,slot主要有以下几种类型:

  1. 默认插槽(Default Slot) 默认插槽是最常见的一种插槽类型,即没有名称的插槽。当父组件在子组件标签内部放置的所有内容都会被传递到子组件的默认插槽中。

    子组件(子组件 - ChildComponent.vue):

    复制代码
    <template>
      <div class="container">
        <!-- 这里是默认插槽的位置 -->
        <slot></slot>
      </div>
    </template>

    父组件(父组件 - ParentComponent.vue):

    复制代码
    <template>
      <div class="container">
        <!-- 这里是默认插槽的位置 -->
        <slot></slot>
      </div>
    </template>
  2. 具名插槽(Named Slots) 具名插槽允许开发者定义具有特定名称的插槽,从而在子组件中以更精细的方式控制内容的插入位置。

    子组件(子组件 - ChildComponent.vue):

    复制代码
    <template>
      <div class="container">
        <header>
          <!-- 这里是名为'header'的具名插槽 -->
          <slot name="header"></slot>
        </header>
        <main>
          <!-- 这里是默认插槽的位置 -->
          <slot></slot>
        </main>
        <footer>
          <!-- 这里是名为'footer'的具名插槽 -->
          <slot name="footer"></slot>
        </footer>
      </div>
    </template>

    父组件(ParentComponent.vue):

    复制代码
    <template>
      <ChildComponent>
        <!-- 插入到名为'header'的具名插槽 -->
        <template v-slot:header>
          <h1>这是头部内容</h1>
        </template>
        
        <!-- 插入到默认插槽 -->
        <p>这是主要内容</p>
        
        <!-- 插入到名为'footer'的具名插槽 -->
        <template v-slot:footer>
          <p>这是底部内容</p>
        </template>
      </ChildComponent>
    </template>
  3. 作用域插槽(Scoped Slots) 作用域插槽允许父组件访问子组件的数据并在插槽内容中使用这些数据。

    子组件(ChildComponent.vue):

    复制代码
    <template>
      <ul>
        <!-- 作用域插槽,将item作为作用域内的属性暴露给父组件 -->
        <li v-for="item in items">
          <slot :item="item" name="itemSlot"></slot>
        </li>
      </ul>
    </template>
    
    <script>
    export default {
      data() {
        return {
          items: ['Item 1', 'Item 2', 'Item 3']
        };
      }
    };
    </script>

    父组件(ParentComponent.vue):

    复制代码
    <template>
      <ChildComponent>
        <!-- 使用v-slot指令定义作用域插槽 -->
        <template v-slot:itemSlot="slotProps">
          <strong>{{ slotProps.item }}</strong>
        </template>
      </ChildComponent>
    </template>

在上述示例中,v-slot(在Vue 2.x 中也写作 slot)是Vue 2.6+引入的新语法糖,用于更加清晰地表示插槽的使用。在早期版本中,需要使用 slot 属性配合 <template> 标签实现类似的功能。在Vue 3.x中,v-slot 已经成为标准语法。

相关推荐
想躺平的咸鱼干21 分钟前
Volatile解决指令重排和单例模式
java·开发语言·单例模式·线程·并发编程
雪碧聊技术35 分钟前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
快起来别睡了37 分钟前
手写 Ajax 与 Promise:从底层原理到实际应用
前端
Owen_Q40 分钟前
Denso Create Programming Contest 2025(AtCoder Beginner Contest 413)
开发语言·算法·职场和发展
·云扬·1 小时前
【Java源码阅读系列37】深度解读Java BufferedReader 源码
java·开发语言
打不着的大喇叭1 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
liulilittle1 小时前
C++ i386/AMD64平台汇编指令对齐长度获取实现
c语言·开发语言·汇编·c++
无我Code1 小时前
2025----前端个人年中总结
前端·年终总结·创业
程序猿阿伟1 小时前
《前端路由重构:解锁多语言交互的底层逻辑》
前端·重构
Sun_light2 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js