vue slot示例

Vue的插槽（slot）是一种用于在组件之间传递内容的机制。它允许你在组件的模板中定义一个或多个插槽，并在使用该组件时，将内容插入到这些插槽中。

下面是一个简单的Vue插槽示例：

<!-- 父组件 -->
<template>
  <div>
    <h1>父组件</h1>
    <child-component>
      <p slot="content">这是插槽内容</p>
    </child-component>
  </div>
</template>

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

在上面的示例中，父组件中使用了子组件，并在子组件的插槽中插入了一个`<p>`标签作为内容。子组件中使用`<slot>`标签来定义插槽，并通过`name`属性指定了插槽的名称为"content"。

当父组件渲染时，子组件会将插槽中的内容替换为父组件传递的内容。最终的渲染结果将是父组件中的标题和子组件中的内容。