Vuetify.js自定义组件如何实现header、body等自定义命名插槽功能

以下提供两种实现方式，你可以根据自己的需求选择：

方案一：标准命名插槽（推荐，符合Vue官方设计规范） #

这是成本最低、可维护性最高的实现方式，仅需要调整调用侧的插槽书写格式。

1. 自定义MyComponent组件代码 #

<template>
  <v-dialog>
    <h1>
      <!-- 声明名为header的插槽 -->
      <slot name="header" />
    </h1>
    <!-- 声明名为body的插槽 -->
    <slot name="body" />
  </v-dialog>
</template>

2. 调用侧代码 #

将原来的<header>、<body>标签替换为带v-slot指令的template标签即可，#header是v-slot:header的简写：

<MyComponent>
  <template #header>
    Titolo
  </template>
  <template #body>
    my component body
  </template>
</MyComponent>

最终渲染结构和你预期的完全一致。

方案二：完全匹配你预期的调用写法 #

如果必须保留<header>、<body>直接包裹内容的调用格式，不需要写template和插槽指令，可以在组件内部解析默认插槽的VNode节点，筛选对应标签的内容分别渲染：

自定义MyComponent组件代码（Vue 3版本） #

<template>
  <v-dialog>
    <h1 v-if="headerContent">
      <component :is="headerContent" />
    </h1>
    <component :is="bodyContent" v-if="bodyContent" />
  </v-dialog>
</template>

<script setup>
import { useSlots, computed } from 'vue'

const slots = useSlots()

// 从默认插槽中提取header标签的内容
const headerContent = computed(() => {
  const defaultSlotNodes = slots.default?.() || []
  return defaultSlotNodes.find(node => node.type === 'header')?.children
})

// 从默认插槽中提取body标签的内容
const bodyContent = computed(() => {
  const defaultSlotNodes = slots.default?.() || []
  return defaultSlotNodes.find(node => node.type === 'body')?.children
})
</script>

如果你使用的是Vue 2，仅需要调整脚本部分的逻辑，通过this.$slots.default获取插槽节点，判断node.tag === 'header'/node.tag === 'body'筛选内容即可，模板部分逻辑不变。

内容的提问来源于stack exchange，提问作者loreeemartiii