vue 插槽使用示例代码

下面是一个 Vue 插槽的使用实例代码：

<!-- 父组件 -->
<template>
  <div>
    <h1>这是父组件</h1>
    <child-component>
      <template v-slot:default>
        <h2>这是插槽内容</h2>
        <p>插槽可以包含任意 HTML 和 Vue 组件</p>
      </template>
    </child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <h2>这是子组件</h2>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent'
}
</script>

在这个示例中，我们创建了一个父组件 ParentComponent 和一个子组件 ChildComponent。在父组件中，我们使用了 v-slot 指令来定义一个插槽，插槽的名称为 default。在插槽中，我们放置了一些 HTML 内容。

在子组件中，我们使用了 <slot> 标签来定义插槽的位置。这个标签的作用是将父组件中定义的插槽内容插入到这个位置。

当父组件和子组件一起渲染时，插槽内容会被插入到子组件中的 <slot> 标签所在的位置。在这个示例中，父组件中定义的插槽内容会被插入到子组件的 <slot></slot> 标签所在的位置。

需要注意的是，插槽的名称必须与父组件中定义的插槽名称一致，才能正确地将插槽内容插入到子组件中。