8. Vue插槽的使用

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

Mr_LiuP

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

阅读量1.5k

点赞数 2

CC 4.0 BY-SA版权

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

本文链接：https://blog.csdn.net/Mr_LiuP/article/details/123349511

Vue 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了Vue.js中的插槽概念，包括插槽的基本使用，如何通过v-slot指令将内容填充到默认插槽和具名插槽，以及如何利用作用域插槽在组件间传递数据。示例代码展示了如何声明和使用这些插槽，帮助读者深入理解Vue组件的可复用性和灵活性。

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

一、什么是插槽

Vue插槽（slot）：是Vue为组件的封装者提供的能力。允许开发者在封装组件的时候，把不确定的、希望由用户指定的部分定义为插槽

二、插槽的基本使用

vue官方规定：

1. 每一个插槽都有一个默认的name名称，如果省略了slot的name属性，则默认名称叫做default

2. 如果用户没有指定内容，则可以显示插槽里面的默认内容，vue官方叫做后备内容

看下方代码：

<template>

<div class="left-container">

<h3>Left 组件</h3>





<slot name="default">这里面是插槽的默认内容</slot>

</div>

</template>

默认情况下在使用组件的时候，提供的内容都会被填充到名字为default的插槽之中

1.如果要把内容填充到指定名称的插槽中，需要使用v-slot: 这个指令

2. v-slot: 后面要跟上插槽的名字

3. v-slot: 指令不能直接用在元素身上，必须使用在template 标签上

4. template标签，是一个虚拟的标签，只起到了包裹的作用，不会被渲染为任何实质性的html元素

5. v-slot: 简写是 # -->

看下方代码：

<template>

<div class="app-container">

<h1>App 根组件</h1>

<hr />

<div class="box">



<left>





<template v-slot:default>

<p>这是在Left组件的内容区域，声明的p标签</p>

</template>

</left>

</div>

</div>

</template>

三、具名插槽

简单来说就是带名字的插槽就叫做具名插槽

<template>

<div class="artical-container">



<div class="header-box">

// 放置一个插槽，名字叫做 title

<slot name="title"></slot>

</div>



<div class="content-box">

// 放置一个插槽，名字叫做 content

<slot name="content"></slot>

</div>



<div class="footer-box">

// 放置一个插槽，名字叫做 autor

<slot name="autor"></slot>

</div>

</div>

</template>

<Artical>

<template #title>

<h2>静夜思</h2>

</template>

<template #content>

<p>床前明月光</p>

<p>疑是地上霜</p>

<p>举头望明月</p>

<p>低头思故乡</p>

</template>

<template #autor>

<div>

作者：李白

</div>

</template>

</Artical>

四、作用域插槽

作用域插槽的定义：在封装组件的时候，为预留slot 插槽提供属性对应的值，这种用法叫做：作用域插槽

看下方代码：

export default {

    data() {

        return {

            info: {

                username: 'liupeng',

                age: 19

            }

        }

    }

}

<slot name="content" msg="hello vue.js" :user="info"></slot>

使用形参来接收作用域插槽传递的值，默认是一个空对象

scope 接收过来的是一个对象，可以通过解构赋值，来拿到自己想要的数据-->

<template #content="{ msg, user}">

        <p>床前明月光</p>

        <p>疑是地上霜</p>

        <p>举头望明月</p>

        <p>低头思故乡</p>

        <p>{{ user.username }}</p>

        <p>{{ msg }}</p>

</template>