如何控制树形子级的显示隐藏 点击父级的时候才让子级显示

要实现点击父级菜单时显示/隐藏子级菜单，你可以在父级菜单项上添加一个点击事件，并在事件处理程序中切换子级菜单的显示状态。

首先，你需要在菜单项数据中添加一个属性来表示子菜单的显示状态。例如，你可以在每个菜单项中添加一个`isOpen`属性，初始值为`false`，表示子菜单默认是隐藏的。

data() {
  return {
    menuData: [
      {
        id: 1,
        name: '菜单1',
        children: [],
        isOpen: false
      },
      // 其他菜单项...
    ]
  }
}

然后，在父级菜单项的模板中，你可以绑定点击事件，并在事件处理程序中切换子菜单的`isOpen`属性的值。

<template>
  <ul>
    <li v-for="item in menuData" :key="item.id">
      <span @click="toggleSubMenu(item)">{{ item.name }}</span>
      <TreeMenu :menuData="item.children" v-if="item.isOpen && item.children.length > 0" />
    </li>
  </ul>
</template>

<script>
export default {
  name: 'TreeMenu',
  props: {
    menuData: {
      type: Array,
      required: true
    }
  },
  methods: {
    toggleSubMenu(item) {
      item.isOpen = !item.isOpen;
    }
  }
}
</script>

在上面的代码中，我们将点击事件绑定到父级菜单项的名称上，并在点击事件处理程序中切换菜单项的`isOpen`属性的值。这样，当你点击父级菜单项时，子菜单的显示状态会随之改变。

最后，你可以在父组件中使用这个递归组件来渲染整个树形菜单：

<template>
  <div>
    <TreeMenu :menuData="menuData" />
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    TreeMenu
  },
  data() {
    return {
      menuData: [
        // 菜单数据...
      ]
    }
  }
}
</script>

现在，当你点击父级菜单时，子菜单会根据`isOpen`属性的值来显示或隐藏。