Vue插槽-理解Vue.js插槽的使用，实现动态内容的插入和复用

NineSenz 8/8/2023 Vue.js

在Vue.js中，插槽（Slots）是一种组件化的技术，它允许我们在父组件中向子组件传递内容，使得子组件的一部分内容可以由父组件动态决定。插槽允许我们在组件中定义一些可插入的内容，类似于HTML中的"占位符"，然后在父组件中填充具体内容。

# 10.1 匿名插槽

匿名插槽是最基本的插槽形式，它允许我们在子组件中定义一个未命名的插槽，并在父组件中插入内容。在子组件中使用<slot></slot>标签定义匿名插槽的位置。

# 子组件

<template>
  <div>
    <h2>子组件</h2>
    <slot></slot>
  </div>
</template>

1
2
3
4
5
6

# 父组件

<template>
  <div>
    <h1>父组件</h1>
    <child-component>
      <p>这里是插入到子组件的内容</p>
    </child-component>
  </div>
</template>

1
2
3
4
5
6
7
8

在上面的例子中，子组件中使用<slot></slot>标签定义了一个匿名插槽的位置，父组件中使用<child-component>包裹内容，并将内容插入到子组件中定义的插槽位置。

# 10.2 具名插槽

具名插槽允许我们在子组件中定义多个带有名称的插槽，并在父组件中根据名称插入内容。在子组件中使用<slot>标签定义具名插槽，并为每个插槽添加name属性。

# 子组件

<template>
  <div>
    <h2>子组件</h2>
    <slot name="header"></slot>
    <slot name="content"></slot>
  </div>
</template>

1
2
3
4
5
6
7

# 父组件

<template>
  <div>
    <h1>父组件</h1>
    <child-component>
      <template v-slot:header>
        <p>这里是插入到子组件头部的内容</p>
      </template>
      <template v-slot:content>
        <p>这里是插入到子组件内容区的内容</p>
      </template>
    </child-component>
  </div>
</template>

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

在上面的例子中，子组件中使用<slot>标签定义了两个具名插槽（header和content），父组件中使用<template>标签并添加v-slot指令来指定插入内容的位置。

Vue.js中插槽的基本概念和使用方法，包括匿名插槽和具名插槽。插槽是Vue.js中非常强大和灵活的组件通信方式，它允许我们在父子组件之间动态地传递内容，实现更加灵活和可复用的组件。

deeplearn

Choose mode