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

相关推荐
lly20240618 小时前
PostgreSQL 表达式
开发语言
LXMXHJ18 小时前
php开发
开发语言·php
JamSlade18 小时前
流式响应 sse 系统全流程 react + fastapi为例子
前端·react.js·fastapi
徐同保18 小时前
react useState ts定义类型
前端·react.js·前端框架
liangshanbo121518 小时前
React 19 vs React 18全面对比
前端·javascript·react.js
望获linux18 小时前
【实时Linux实战系列】Linux 内核的实时组调度(Real-Time Group Scheduling)
java·linux·服务器·前端·数据库·人工智能·深度学习
Never_Satisfied18 小时前
在 JavaScript 中,删除数组中内容为xxx的元素
java·前端·javascript
_菜鸟果果18 小时前
Vue3+echarts 3d饼图
前端·javascript·echarts
mjhcsp18 小时前
MATLAB 疑难问题诊疗:从常见报错到深度优化的全流程指南
开发语言·matlab
Lynnxiaowen19 小时前
今天我们开始学习python语句和模块
linux·运维·开发语言·python·学习