Vue中插槽(slot)的使用

本文介绍了Vue.js中插槽的相关知识。插槽是为组件封装者提供的能力,分为默认、具名和作用域插槽三类。文中阐述了声明插槽、使用v - slot指令、具名插槽避免内容重复渲染,还提及了作用域插槽和插槽传值等内容。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

插槽(slot):是vue为组件的封装者提供的能力。允许开发者在封装组件时,把不确定的,希望由【用户指定】的部分定义为【插槽】

插槽分为3类:默认插槽,具名插槽,作用域插槽

1.声明插槽,

每个插槽都有name属性,默认为default

<template>
  <div class="left-container">
    <!-- 当用户没有指定插槽是默认内容是slot标签里的内容 -->
    <slot name="default">这是default插槽默认的内容</slot>
  </div>
</template>

2.v-slot指令:

将内容渲染到指定插槽中

<template>
  <div class="app-container">
    <div class="box">
        <!-- 默认情况下,在使用组件的时候,提供的内容都会被填充到名字为default的插槽中 -->
        <!-- 1.如果要把内容填充到指定的名称的插槽中,需要v-slot:这个指令 -->
        <!-- 2.v-slot:要跟上插槽的名称 -->
        <!-- 3.v-slot:指令不能用在元素身上,只能用在template上 -->
        <!-- 4.template这个标签是一个虚拟的标签,只起到包裹的作用,但不会被渲染成实质性的html元素-->
        <!-- 5.v-slot: 简写为# -->
        <template v-slot:default>
          <p>这是Left组件的内容区域,声明p标签</p>
        </template>
    </div>
  </div>
</template>

3.具名插槽

在同一个组件中,我们有时需要多个插槽作为预留区域,此时,应该给每一个插槽取一个不同的name名称

如:定义了student组件,并设置了多个插槽。

<template>
  <div>
      <!-- 名字 -->
      <div class="username">
          <slot></slot>
      </div>
 
      <!-- 性别 -->
      <div class="sex">
          <slot></slot>
      </div>
 
      <!-- 年龄 -->
      <div class="age">
          <slot></slot>
      </div>
  </div>
</template>


<template>
  <div class="box">
    
 
    <student>
      <h3>xxxx</h3>
    </student>
  </div>
</template>

其中三个插槽名相同为default,在中写入的内容会同时渲染到名称相同的插槽,如果给插槽给上相应的name属性,就会避免这种情况

4.作用域插槽

<template>
  <div class="right-container">
    <h3>student 组件</h3>
 
    <div class="content-box">
      <!-- 在封装组件时,为预留的<slot>提供属性对应的值,这种用法叫做"作用域插槽" -->
      <slot name="content" msg="刘兰健"></slot>
    </div>
  </div>
</template>
 
<!-- 在上块代码中,设置了msg="刘兰健",我们此时需要在插槽内容区内拿到该数据: -->
<!-- 插槽内容部分 -->
<student>
  <template v-slot.content="obj"> 
        <div>
          <p>{{ obj.msg }}</p>
        </div>
      </template>
</student>
<!-- 这里的msg就能获取到成功渲染 -->

5.插槽传值

  • 在child2中
<template>
  <div>
      <ul>
          <!-- 插槽传值 -->
          <slot :msg="newGames"></slot>
      </ul>
  </div>
</template>

<script>
export default {
    name:"child2",
    data() {
        return {
            newGames: ["天天酷跑", "PUBG", "LOL"],
        }
    },
}
  • 在child1中

     <child2>
          <!-- 插槽数据接收, 只能在模板标签上接收 -->
          <template slot-scope="newGames">
            <ul>
              <li v-for="item in newGames.msg" :key="item.index">{{item}}</li>
            </ul>
          </template>
      </child2>
    

    这样就能把child2中的值传给child1,然后在将获取到的值渲染到列表中

### Vue.js Slot 插槽使用教程 #### 默认插槽 默认插槽是最简单的形式,它允许父组件向子组件传递任意内容。当子组件中只有一个未命名的 `<slot>` 标签时,默认插槽会自动接收来自父组件的内容。 ```html <!-- 子组件 ChildComponent.vue --> <template> <div class="child"> <h2>这是子组件</h2> <slot></slot> </div> </template> <script> export default { name: 'ChildComponent' } </script> ``` ```html <!-- 父组件 ParentComponent.vue --> <template> <div class="parent"> <h1>这是父组件</h1> <ChildComponent> 这里是通过默认插槽传入的内容。 </ChildComponent> </div> </template> <script> import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent } } </script> ``` #### 具名插槽 具名插槽允许多个不同的位置插入内容。通过给 `<slot>` 添加 `name` 属性,在父组件中可以指定具体哪个具名插槽应该被填充。 ```html <!-- 子组件 NamedSlotsExample.vue --> <template> <div class="named-slots-example"> <header> <slot name="header"></slot> </header> <main> <slot></slot> </main> <footer> <slot name="footer">这里是备用内容。</slot> </footer> </div> </template> ``` ```html <!-- 父组件 UsingNamedSlots.vue --> <template> <div class="using-named-slots"> <NamedSlotsExample> <!-- 向 header 名字的 slot 填充内容 --> <template v-slot:header> <h1>这里是从父级传来的头部内容</h1> </template> <!-- 默认插槽内容 --> <p>这是一些普通的段落文本。</p> <!-- 向 footer 名字的 slot 填充内容 --> <template #footer> <p>这里是从父级传来的底部内容</p> </template> </NamedSlotsExample> </div> </template> <script> import NamedSlotsExample from './NamedSlotsExample.vue'; export default { components: { NamedSlotsExample }, }; </script> ``` #### 作用域插槽 作用域插槽让子组件能够将数据暴露给父组件使用的模板片段内。这意味着可以在父组件中访问到子组件数据并基于这些数据显示自定义内容。 ```html <!-- 子组件 ScopedSlotExample.vue --> <template> <ul> <li v-for="(item, index) in items" :key="index"> <slot :text="item.text">{{ item.text }}</slot> </li> </ul> </template> <script> export default { data() { return { items: [ { text: "苹果" }, { text: "香蕉" }, { text: "橙子" } ] }; } } </script> ``` ```html <!-- 父组件 UseScopedSlot.vue --> <template> <div class="use-scoped-slot"> <ScopedSlotExample v-slot:default="{ text }"> {{ text }} </ScopedSlotExample> </div> </template> <script> import ScopedSlotExample from "./ScopedSlotExample"; export default { components: { ScopedSlotExample } }; </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

对卦卦上心

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值