vue插槽slot

Vue的插槽是一种功能强大的模板机制，它允许父组件向子组件传递内容。Vue的插槽分为默认插槽、具名插槽和作用域插槽。

1. 默认插槽
   默认插槽就是没有指定名称的插槽，可以通过在子组件中使用<slot>标签来表示。父组件中的内容将会被插入到这里。默认插槽在一些简单的情况下非常有用。

例如，假设我们有一个HelloWorld组件，它的模板如下所示：

// 子组件
<template>
  <div>
    <h1>Hello, World!</h1>
    <slot></slot>
  </div>
</template>

在这个组件中，我们指定了一个默认插槽。任何放在子组件标签之间的内容都将被插入到该插槽内。例如：

// 父组件
<HelloWorld>
  <p>This is some content.</p>
</HelloWorld>

在这种情况下，<p>标签和其中的“内容”都将被插入到默认插槽中，并与<h1>标签一起呈现。
2. 具名插槽
具名插槽是通过给插槽一个名称来定义的。具名插槽可以让我们在子组件中有多个插槽，并且可以在父组件中指定内容插入到哪个插槽。在子组件中，我们可以用<slot>标签加上name属性来定义一个具名插槽。在父组件中，我们可以在<template>标签中使用<slot>标签来指定内容插入到哪个具名插槽中。
例如，假设我们有一个Layout组件，它的模板如下所示：

// 子组件
<template>
  <div>
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

在这个组件中，我们定义了三个插槽：header、default和footer。我们可以在父组件中使用<template>标签来指定内容插入到指定的插槽中。例如：

// 父组件
<Layout>
  <template v-slot:header>
    <h1>My App</h1>
  </template>

  <p>This is the main content.</p>

  <template v-slot:footer>
    <p>© 2020 My App</p>
  </template>
</Layout>

在这种情况下，<h1>标签将会被插入到header插槽中，<p>标签将会被插入到default插槽中，<p>© 2020 My App</p>标签将会被插入到footer插槽中。
3. 作用域插槽
作用域插槽是一种允许子组件向父组件传递数据的插槽。它可以让父组件在插槽内使用子组件中的数据。这种插槽通过在子组件模板中使用<slot>标签加上v-bind指令来定义。在父组件中，我们可以在<template>标签中使用<slot>标签，并通过v-slot指令来定义一个作用域插槽。
例如，假设我们有一个List组件，它的模板如下所示：

<template>
  <div>
    <h1>{{ title }}</h1>
    <ul>
      <li v-for="item in items" :key="item.id">
        <slot :item="item"></slot>
      </li>
    </ul>
  </div>
</template>

在这个组件中，我们定义了一个作用域插槽，使用了v-bind指令来绑定一个item属性。在父组件中，我们可以使用v-slot指令来定义作用域插槽，并使用slot-scope属性来在插槽内声明一个变量来访问子组件中的数据。
例如，我们可以在父组件中这样使用List组件：

<List :title="title" :items="items">
  <template v-slot:item="props">
    <span>{{ props.item.name }}</span>
  </template>
</List>

在这种情况下，<span>{{ props.item.name }}</span>标签将会被插入到每个列表项的插槽内，并使用子组件中的item数据进行渲染。

• 当使用该组件标签时候，组件标签里面的内容就会自动填坑（替换组件模板中slot位置），作为承载分发内容的出口
• slot插槽向组件内部指定位置传递内容，完成这个复用组件在不同场景的应用
• 默认插槽 父组件在使用的时候，直接在子组件的标签内写入内容即可
• 具名插槽 子组件用name属性来表示插槽的名字 父组件中在使用时在默认插槽的基础上加上slot属性，值为子组件插槽name属性值
• 作用域插槽 子组件在作用域上绑定属性来将子组件的信息传给父组件使用，这些属性会被挂在父组件v-slot接受的对象上

父组件中在使用时通过v-slot:（简写：#）获取子组件的信息，在内容中使用