vue递归菜单，选中状态怎样设置，子节点选中父节点也选中

在 Vue 递归菜单中，可以通过设置 `v-bind:class` 来实现选中状态的设置。具体操作如下：

1. 在菜单项的数据结构中添加一个 `selected` 属性，用于记录当前菜单项是否被选中。

2. 给菜单项绑定一个点击事件，在点击事件中切换当前菜单项的 `selected` 属性的值。

3. 在菜单项的模板中，使用 `v-bind:class` 绑定一个样式类，根据 `selected` 属性的值来确定是否添加选中状态的样式类。

4. 在递归渲染子菜单时，将父菜单的 `selected` 状态传递给子菜单，并在子菜单中根据父菜单的 `selected` 状态来确定自身是否被选中。

5. 在父菜单选中时，将选中状态递归传递给所有子菜单，以实现子节点选中父节点也选中的效果。

示例代码如下：

<template>
  <div class="menu">
    <ul>
      <li v-for="item in menuData" :key="item.id" :class="{ active: item.selected }" @click="toggleSelected(item)">
        {{ item.title }}
        <menu-item v-if="item.children" :menu-data="item.children" :parent-selected="item.selected"></menu-item>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "MenuItem",
  props: {
    menuData: {
      type: Array,
      required: true,
    },
    parentSelected: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    toggleSelected(item) {
      item.selected = !item.selected;
      this.$emit("update:selected", item.selected);
    },
  },
  computed: {
    hasSelected() {
      return this.menuData.some((item) => item.selected);
    },
  },
  watch: {
    hasSelected(newVal) {
      this.$emit("update:selected", newVal || this.parentSelected);
    },
  },
};
</script>

在父组件中使用该组件时，可以通过 `v-model` 来实现选中状态的双向绑定，示例代码如下：

<template>
  <div>
    <menu-item v-model="selectedItems" :menu-data="menuData"></menu-item>
  </div>
</template>

<script>
import MenuItem from "./MenuItem.vue";

export default {
  components: {
    MenuItem,
  },
  data() {
    return {
      menuData: [
        {
          id: 1,
          title: "菜单1",
          selected: false,
          children: [
            {
              id: 11,
              title: "子菜单1-1",
              selected: false,
            },
            {
              id: 12,
              title: "子菜单1-2",
              selected: false,
            },
          ],
        },
        {
          id: 2,
          title: "菜单2",
          selected: false,
          children: [
            {
              id: 21,
              title: "子菜单2-1",
              selected: false,
            },
            {
              id: 22,
              title: "子菜单2-2",
              selected: false,
            },
          ],
        },
      ],
      selectedItems: [],
    };
  },
};
</script>