Vue中关于插槽的使用

最新推荐文章于 2025-06-09 09:57:33 发布

__十七

最新推荐文章于 2025-06-09 09:57:33 发布

阅读量649

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.csdn.net/wlijun_0808/article/details/124769284

Vue 专栏收录该内容

59 篇文章

订阅专栏

本文详细介绍了Vue中组件插槽的使用，包括默认插槽、具名插槽和作用域插槽的概念与用法，并通过实例展示了它们的工作原理。此外，还提到了Vue3中对插槽的改进，引入了v-slot语法以简化模板结构。

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

1，关于插槽的使用
插槽是在父组件和子组件中起作用的.父组件可以决定子组件中的部分内容.
形象化的说:子组件会留下一个坑位,父组件会写一些内容来填这个坑位.
（1）默认插槽

组件A:
<template>
<div>
<B> 这是插槽的内容</B>
</div>
</template>
...
组件B:
<template>
<div>
<slot>这是默认的内容</slot>
</div>
</template>
...

结果:
图片: https://uploader.shimo.im/f/Wa0vSD3kDyBsRTRS.png!thumbnail?accessToken=eyJhbGciOiJIUzI1NiIsImtpZCI6ImRlZmF1bHQiLCJ0eXAiOiJKV1QifQ.eyJhdWQiOiJhY2Nlc3NfcmVzb3VyY2UiLCJleHAiOjE2NTI1MTQ1NjMsImZpbGVHVUlEIjoiMGwzTlZnWnd6eFNMWGEzUiIsImlhdCI6MTY1MjUxNDI2MywidXNlcklkIjo3ODg1MTg5N30.Y8qmJdUqjlfwhXv5tY4ZnekuuOK0Eq5n6L52Sevev1Y

若是B组件中有坑位,但是A组件并没有内容来填坑,那么就会显示B组件坑位中的默认值
组件A:

<template>
<div>
//<B> 这是插槽的内容</B>
</div>
</template>
...
组件B:
<template>
<div>
<slot>这是默认的内容</slot>
</div>
</template>
...

图片: https://uploader.shimo.im/f/X0fwO4cSODO3JWML.png!thumbnail?accessToken=eyJhbGciOiJIUzI1NiIsImtpZCI6ImRlZmF1bHQiLCJ0eXAiOiJKV1QifQ.eyJhdWQiOiJhY2Nlc3NfcmVzb3VyY2UiLCJleHAiOjE2NTI1MTQ1NjMsImZpbGVHVUlEIjoiMGwzTlZnWnd6eFNMWGEzUiIsImlhdCI6MTY1MjUxNDI2MywidXNlcklkIjo3ODg1MTg5N30.Y8qmJdUqjlfwhXv5tY4ZnekuuOK0Eq5n6L52Sevev1Y

若是B组件中没有坑位,那即使A组件中B组件中放置了东西,那也不会生效.

组件A:
<template>
<div>
<B> 这是插槽的内容</B>
</div>
</template>
...
组件B:
<template>
<div>
//<slot>这是默认的内容</slot>
</div>
</template>
...

在这里插入图片描述

（2）具名插槽
顾名思义,就是带有名字的插槽.我们在默认插槽中,发现只能写一个坑位(slot),若是想要写多个坑位,怎么来分辨哪个内容填到哪个内容中呢?这时候我们就可以,给每一个slot来起个名字,来分辨就可以啦.
在子组件中,直接在slot标签中,加上name这个attribute即可
在父组件中,需要用template标签来包裹你想往坑位中填的内容,template标签要写上和坑位相同的solt的名字.那么template中的内容就会全部填在坑里面.

组件A:
<template>
<div>
<B>
  <template slot='headerContent'>
    <span>这是头部的内容</span>
  </template>
  <template slot='mainContent'>
    <span>这是主体的内容</span>
  </template>
</B>
</div>
</template>
...
组件B:
<template>
<div>
<header>
<slot name='headerContent'></slot>
</header>
<main>
<slot name='mainContent'></slot>
</main>
</div>
</template>
...

结果是:
在这里插入图片描述

（3）作用域插槽
前两种插槽都是,父组件将内容填到子组件中.
还有一种插槽,是可以让父组件拿到子组件中的数据,按照父组件决定的方式放在坑位里面.

子组件往父组件中传递数据,使用双向绑定的方式.
父组件中可以使用slot-scoped的方式来获取子组件中的数据,并且将内容填到坑里.

组件A:
<template>
<div>
  <template slot-scoped='data'>
    <B> ${{data.obj.lastName}}  </B>
  </template>
</div>
</template>
...
组件B:
<template>
<div>
<slot :obj=obj>${{obj.firstName}}</slot>
</div>
</template>
<script>
...
data(){
  return{
  obj:{
     firstName:'oneName',
     lastName:'twoName'
  }
  }
}
...
</script>

结果:子组件给的firstName失效了,而是显示出了父组件中填坑的数据twoName
在这里插入图片描述

(4) vue3 的改进
使用 v-slot 来替代父组件中的solt 和 solt-scoped属性.
举例:
针对默认插槽和具名插槽的父组件写法

组件A:
<template>
<div>
<B>
  <template v-slot='headerContent'>
    <span>这是头部的内容</span>
  </template>
  <template v-slot='mainContent'>
    <span>这是主体的内容</span>
  </template>
</B>
</div>
</template>

针对作用域插槽中的父组件写法

组件A:
<template>
<div>
  <template v-slot='data'>
    <B> ${{data.obj.lastName}}  </B>
  </template>
</div>
</template>
...