Vue插槽的使用

最新推荐文章于 2024-04-18 20:12:13 发布

前端每日三省

最新推荐文章于 2024-04-18 20:12:13 发布

阅读量123

点赞数

分类专栏： dairy vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_42560424/article/details/129486333

版权

dairy 同时被 2 个专栏收录

100 篇文章 13 订阅

订阅专栏

vue

21 篇文章 1 订阅

订阅专栏

33. Vue插槽的使用

1. 定义

Vue插槽是Vue组件中一种非常强大和灵活的功能，它允许你在组件的模板中预留出一些位置，以便在使用该组件的时候，动态地将内容插入到这些位置上。

Vue插槽分为匿名插槽、具名插槽和作用域插槽。匿名插槽可以被任何未命名的插槽内容使用，具名插槽可以为多个插槽提供不同的名称以便于标识和使用，作用域插槽允许你在父组件中使用子组件中的数据。

2. 匿名插槽

<!-- slotCom.vue -->
<template>
  <div class="slot">
    <h4>这是匿名插槽组件</h4>
    <slot>
      默认内容，会被显示插入的内容替代，用于没有插入内容时显示
      <!-- 插槽内容会显示在这里 -->
    </slot>
  </div>
</template>

<!-- pages.vue -->
<script>
import SlotCom from "./slotCom.vue"
</script>
<template>
  <div class="pages">
    <SlotCom>
      在此写入内容
    </SlotCom>
  </div>
</template>

3. 具名插槽

<!-- slotCom.vue -->
<template>
  <div class="slot">
    <h4>这是具名插槽组件</h4>
    <slot name="header"></slot>
    <slot name="footer"></slot>
  </div>
</template>

<!-- pages.vue -->
<script>
import SlotCom from "./slotCom.vue"
</script>
<template>
  <div class="pages">
   <SlotCom>
      <template v-slot:header>
        header插槽的内容
      </template>
      <!-- 具名插槽简写 -->
      <template #footer>
        footer插槽的内容
      </template>
    </SlotCom>
  </div>
</template>

4. 作用域插槽

<!-- slotCom.vue -->
<template>
  <slot text="propsText" count="1"></slot>
</template>

<!-- pages.vue -->
<script>
import SlotCom from "./slotCom.vue"
</script>
<template>
  <div class="pages">
    <SlotCom>
      <template v-slot="slotProps">
        {{ slotProps.text }} -- {{ slotProps.count }}
      </template>
    </SlotCom>
  </div>
</template>