核心思路 #

将showTitle的Prop类型扩展为布尔值或函数，组件内部根据当前层级动态计算是否显示标题；递归传递时保留原始的showTitle参数（而非计算后的布尔值），确保子层级能基于自身level执行判断逻辑。

具体实现步骤 #

• 扩展Prop类型：把showTitle定义为boolean | ((level: number) => boolean)，兼容原有布尔值用法和新增的函数动态判断用法。
• 计算显示状态：通过计算属性，根据当前节点的level和传入的showTitle值，得出最终是否显示标题的结果。
• 递归传递参数：渲染子节点时直接传递原始的showTitle参数，避免子层级丢失动态判断逻辑。

修改后的代码示例 #

Item类型定义（保持不变） #

export interface Item {
  title: string;
  children: Item[];
}

Node组件代码 #

<script setup lang="ts">
import { computed } from 'vue';
import type { Item } from './Item';

const props = defineProps<{
  item: Item;
  level: number;
  showTitle: boolean | ((level: number) => boolean);
}>();

// 计算当前节点是否应该显示标题
const shouldShowTitle = computed(() => {
  if (typeof props.showTitle === 'function') {
    return props.showTitle(props.level);
  }
  return props.showTitle;
});
</script>

<template>
  <div style="padding:10px; border: 1px solid red;">
    <div v-if="shouldShowTitle">{{ item.title }}</div>
    <!-- 递归传递原始showTitle，让子节点根据自身level判断 -->
    <Node 
      v-for="child in item.children" 
      :key="child.title"
      :item="child" 
      :level="level + 1" 
      :showTitle="showTitle" 
    />
  </div>
</template>

父组件用法示例 #

<script setup lang="ts">
import Node from './Node.vue';

const root = {
  title: 'root',
  children: [
    {
      title: 'root>1',
      children: [
        { title: 'root>1>1', children: [] },
        { title: 'root>1>2', children: [] }
      ]
    },
    { title: 'root>2', children: [] }
  ]
};
</script>

<template>
  <!-- 原有用法：所有层级显示标题 -->
  <Node :item="root" :level="0" :showTitle="true" />

  <!-- 动态判断用法：第2层级不显示标题，其他层级显示 -->
  <Node 
    :item="root" 
    :level="0" 
    :showTitle="(currentLevel) => currentLevel !== 2" 
  />
</template>

方案优势 #

• 兼容性强：完全兼容原有的布尔值传参方式，旧代码无需修改。
• 灵活性高：支持任意复杂的层级规则，比如多个例外层级、范围判断等。
• 逻辑解耦：组件内部封装判断逻辑，父组件只需关注业务规则，代码更清晰。

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