vue3 layout布局插槽

Vue3中的布局插槽是一种方便的方式，可以帮助我们更好地组织和布局页面。Vue3提供了一个内置的组件`<slot>`，可以在组件中定义一个或多个插槽，然后在使用该组件时，可以将其他组件或HTML元素插入到这些插槽中。这样，我们就可以更加灵活地组合和布局页面。

下面是一个使用Vue3布局插槽的例子：

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

在上面的例子中，我们定义了三个插槽，分别是`header`、`default`和`footer`。在使用该组件时，可以将其他组件或HTML元素插入到这些插槽中，例如：

<template>
  <my-layout>
    <template #header>
      <h1>这是头部</h1>
    </template>
    <p>这是主要内容</p>
    <template #footer>
      <p>这是底部</p>
    </template>
  </my-layout>
</template>

在上面的例子中，我们使用了`<my-layout>`组件，并将`<h1>`元素插入到`header`插槽中，将`<p>`元素插入到`default`插槽中，将另一个`<p>`元素插入到`footer`插槽中。