Vue插槽攻略-JXin的博客

温馨提示

该文章距离上次更新已经过去了 1375 天，文章内容可能已经过时。

什么是插槽
基本用法
- 默认插槽
- 具名插槽
作用域插槽
后备内容
总结

什么是插槽

Vue插槽是一种特殊的语法，允许我们在父组件中预留一个可插入内容的插槽，然后在子组件中填充内容。这样一来，我们就可以在不同的上下文中使用同一个组件，并且能够动态地向组件中插入内容，从而实现更高的灵活性和复用性。

基本用法

在Vue中，我们可以通过两种方式来使用插槽：具名插槽和默认插槽。

默认插槽

默认插槽是最简单的一种插槽，它允许我们在组件中插入任意内容。例如：

父组件

<template>
  <div>
    <ChildComponent>
      <p>插入插槽的内容</p>
    </ChildComponent>
  </div>
</template>

1
2
3
4
5
6
7

ChildComponent 子组件

<template>
  <div>
    <slot></slot>
  </div>
</template>

1
2
3
4
5
6

父组件写在ChildComponent组件中的信息、HTML或者组件会替代子组件ChildComponent中的<slot></slot>，如果组件中没有一个<slot></slot>，则写在<Info></Info>之间的任何内容都会被抛弃

具名插槽

具名插槽允许我们在子组件中定义多个插槽，并且可以根据插槽的名称来填充内容。例如：

<template>
 <div class="container">
   <header>
     <slot name="header"></slot>
   </header>
   <main>
     <slot></slot>
   </main>
   <footer>
     <slot name="footer"></slot>
  </footer>
 </div>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13

如果slot没有带name，则会默认name为default

<template>
 <div id="app">
   <Info>
     <template v-slot:header>
       <h1>插入header插槽的头部信息</h1>
     </template>

     <p>中间内容</p>
     <p>由于没有命名，会添加在默认插槽中</p>

     <template v-slot:footer>
       <p>插入footer插槽的底部信息</p>
     </template>
   </Info>
 </div>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

如果没有命名，默认就是default，上下两种写法都是一样的

<template>
 <div id="app">
   <Info>
     <template v-slot:header>
       <h1>Here might be a page title</h1>
     </template>

    <template v-slot:default>
       <p>A paragraph for the main content.</p>
       <p>And another one.</p>
     </template>

     <template v-slot:footer>
       <p>Here's some contact info</p>
     </template>
   </Info>
 </div>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

具名插槽的v-slot:还能简写为#

<template>
 <div id="app">
   <Info>
     <template #header>
       <h1>Here might be a page title</h1>
     </template>

    <template #default>
       <p>A paragraph for the main content.</p>
       <p>And another one.</p>
     </template>

     <template #footer>
       <p>Here's some contact info</p>
     </template>
   </Info>
 </div>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

作用域插槽

作用域插槽是Vue插槽中的另一个强大功能，它允许子组件向父组件传递数据。例如：

变量message是子组件Info中的数据

<template>
 <div class="container">
   <slot>{{ message.a }}</slot>
 </div>
</template>
<script>
export default {
 data() {
   return {
     message: {
       a: 1,
       b: 2,
      },
    };
  },
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

如果这时候要显示的是变量message中b的数据而不是a的数据，父组件是获取不到变量message的

<template>
 <div id="app">
   <Info></Info>
 </div>
</template>

1
2
3
4
5

这时候就只能通过作用域插槽来传值，子组件将user作为 slot 元素的一个attribute绑定上去

<template>
 <div class="container">
   <slot :info="info">{{ info.a }}</slot>
 </div>
</template>

1
2
3
4
5

绑定在 slot 元素上的 attribute 被称为 插槽prop。在父组件中，可以使用带值的v-slot来自定义插槽prop的名字

<template>
 <div id="app">
   <Info v-slot:default="slotProps">{{ slotProps.b }}</Info>
 </div>
</template>

1
2
3
4
5

以上是只有默认插槽的情况才能这么写，如果有多个插槽还是要使用具名插槽写法

<template>
 <div id="app">
   <Info>
     <template v-slot:default="slotProps">
       {{ slotProps.b }}
     </template>
      <template v-slot:other="otherSlotProps">
       ...
     </template>
   </Info>
 </div>
</template>

1
2
3
4
5
6
7
8
9
10
11
12

后备内容

后备内容指的是为插槽设置一个默认的内容，它会在没有提供内容的时候被渲染。
如果提供了内容，则提供的内容会覆盖默认的内容

<template>
 <div>
   <slot>默认内容</slot>
 </div>
</template>

1
2
3
4
5

总结

Vue插槽是Vue.js中一个非常强大和灵活的特性，能够帮助我们更好地组织和复用组件。希望本文能够对你有所帮助，谢谢阅读！