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

相关推荐
翻滚吧键盘29 分钟前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹35 分钟前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
前端风云志37 分钟前
typescript结构化类型应用两例
javascript
杨进军1 小时前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW1 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
-凌凌漆-1 小时前
【Qt】QStringLiteral 介绍
开发语言·qt
程序员爱钓鱼1 小时前
Go语言项目工程化 — 常见开发工具与 CI/CD 支持
开发语言·后端·golang·gin
说码解字1 小时前
Kotlin lazy 委托的底层实现原理
前端
gnip2 小时前
总结一期正则表达式
javascript·正则表达式
军训猫猫头2 小时前
1.如何对多个控件进行高效的绑定 C#例子 WPF例子
开发语言·算法·c#·.net