vue 卡槽 自定义模板

Vue.js 的插槽（slot）可以用于在组件中插入自定义模板。插槽允许我们在组件中定义一些预留位置，然后在使用组件时，将具体的内容插入到这些位置上。

以下是一个简单的示例，展示如何在 Vue 组件中使用插槽：

<!-- 父组件 -->
<template>
  <div>
    <h1>父组件</h1>
    <ChildComponent>
      <!-- 插入自定义内容到子组件的插槽中 -->
      <template v-slot:default>
        <p>这是插入到默认插槽的内容</p>
      </template>
      <template v-slot:custom>
        <p>这是插入到自定义插槽的内容</p>
      </template>
    </ChildComponent>
  </div>
</template>

<!-- 子组件 -->
<template>
  <div>
    <h2>子组件</h2>
    <slot></slot> <!-- 默认插槽 -->
    <slot name="custom"></slot> <!-- 自定义插槽 -->
  </div>
</template>

在上面的示例中，父组件通过 `<ChildComponent>` 使用了子组件，并在子组件的模板中使用了两个插槽：`<slot>` 和 `<slot name="custom">`。在父组件中，我们使用 `<template>` 标签来定义具体的插入内容，并通过 `v-slot` 指令将内容插入到对应的插槽中。

注意，在 Vue 2.6.0 版本之后，为了提高可读性和简洁性，可以使用 `#` 符号来代替 `v-slot`，即将 `<template v-slot:default>` 改写为 `<template #default>`。

这样，当我们在父组件中使用 `<ChildComponent>` 时，插入到插槽中的内容就会显示在对应的位置上。