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

相关推荐
一枚前端小能手3 分钟前
「周更第2期」实用JS库推荐:Rsbuild
前端·javascript
小桥风满袖4 分钟前
极简三分钟ES6 - 正则表达式的扩展
前端·javascript
kebeiovo5 分钟前
项目必备流程图,类图,E-R图实例速通
开发语言·r语言·流程图
软件开发-NETKF88886 分钟前
JSP到Tomcat特详细教程
java·开发语言·tomcat·jsp·项目运行
柯南二号10 分钟前
【大前端】React 使用 Redux 实现组件通信的 Demo 示例
前端·javascript·react.js
学习3人组10 分钟前
React JSX 语法讲解
前端·react.js·前端框架
小高00715 分钟前
🚨 2025 最该淘汰的 10 个前端 API!
前端·javascript·面试
一枚前端小能手17 分钟前
🎨 页面卡得像PPT?浏览器渲染原理告诉你性能瓶颈在哪
前端·javascript
lssjzmn24 分钟前
性能飙升!Spring异步流式响应终极指南:ResponseBodyEmitter实战与架构思考
java·前端·架构
ftswsfb27 分钟前
现代C++:现代C++?
开发语言·c++