vue递归菜单如何设置选中状态，单选，子节点被选中父节点也有选中状态

在 Vue 递归菜单中设置选中状态，可以通过以下步骤实现：

1. 在菜单数据中添加 `selected` 属性，用来保存该节点是否被选中的状态，初始值为 `false`。

2. 在菜单项的模板中，使用 `v-bind:class` 绑定一个计算属性来设置选中状态的样式。计算属性根据 `selected` 属性的值返回不同的类名。

3. 在点击菜单项时，通过 `v-on:click` 绑定一个方法，在该方法中设置 `selected` 属性的值为 `true`。

4. 在计算属性中，递归遍历子节点，如果子节点中有任意一个节点被选中，则将父节点的 `selected` 属性设置为 `true`。

下面是一个示例代码：

<template>
  <ul>
    <li v-for="item in menu" :key="item.id" :class="{ 'selected': item.selected }" @click="selectItem(item)">
      {{ item.name }}
      <menu v-if="item.children" :menu="item.children"></menu>
   li>
  </ul>
</template>

<script>
export default {
  props: ['menu'],
  methods: {
    selectItem(item) {
      item.selected = true;
    }
  },
  computed: {
    hasSelectedChild() {
      return this.menu.some(item => {
        if (item.selected || (item.children && this.hasSelectedChild(item.children))) {
          item.selected = true;
          return true;
        }
        return false;
      });
    }
  }
};
</script>

<style>
.selected {
  background-color: #ccc;
}
</style>

在这个示例中，每个菜单项都有一个 `selected` 属性，用于保存该节点是否被选中的状态。在菜单项的模板中，使用 `v-bind:class` 绑定一个计算属性 `{'selected': item.selected}` 来设置选中状态的样式。

在点击菜单项时，通过 `@click` 绑定的 `selectItem` 方法，将该节点的 `selected` 属性设置为 `true`，表示该节点被选中。

在计算属性 `hasSelectedChild` 中，递归遍历子节点，如果子节点中有任意一个节点被选中，则将父节点的 `selected` 属性设置为 `true`。这样，当子节点被选中时，父节点也会有选中的状态。