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 已经成为标准语法。

相关推荐
WJ.Polar2 分钟前
Python数据容器-list和tuple
开发语言·python
幼儿园技术家2 分钟前
Uniapp简易使用canvas绘制分享海报
前端
FrostedLotus·霜莲16 分钟前
C++主流编辑器特点比较
开发语言·c++·编辑器
超级码.里奥.农18 分钟前
零基础 “入坑” Java--- 七、数组(二)
java·开发语言
KENYCHEN奉孝26 分钟前
Rust征服字节跳动:高并发服务器实战
服务器·开发语言·rust
挺菜的35 分钟前
【算法刷题记录(简单题)002】字符串字符匹配(java代码实现)
java·开发语言·算法
开开心心就好44 分钟前
免费PDF处理软件,支持多种操作
运维·服务器·前端·spring boot·智能手机·pdf·电脑
全宝1 小时前
🎨前端实现文字渐变的三种方式
前端·javascript·css
yanlele1 小时前
前端面试第 75 期 - 2025.07.06 更新前端面试问题总结(12道题)
前端·javascript·面试
妮妮喔妮2 小时前
【无标题】
开发语言·前端·javascript