js代码改为用vue3实现

将上述的JavaScript代码转换成Vue 3的组件形式，我们可以创建两个组件：`NavItem` 和 `NestedList`，然后在主组件 `App` 中使用它们。以下是Vue 3的实现：

首先，创建一个名为`NavItem.vue` 的文件:

<template>
  <li :class="{ active: isActive(index) }" @click="toggleActive(index)">
    {{ item.text }}
    <slot v-if="item.subItems && isActive(index)" />
  </li>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const items = ref([
  // 与之前的HTML结构相对应的数据
]);

function toggleActive(index) {
  items.value.forEach((item, i) => {
    if (i !== index) {
      item.active = false;
    } else {
      item.active = !item.active;
    }
  });
}

function isActive(index) {
  return items.value[index].active;
}
</script>

<style scoped>
.active > * {
  display: block;
}
</style>

然后，创建`NestedList.vue` 文件:

<template>
  <ul v-for="(item, index) in $parent.items" :key="index">
    <li v-if="item.subItems">{{ item.text }}</li>
    <nested-list v-for="subItem in item.subItems" :key="subItem.id" :item="subItem"></nested-list>
  </ul>
</template>

最后，在`App.vue` 主组件中使用这两个组件:

<template>
  <div>
    <nav-item v-for="(item, index) in items" :key="index" :item="item" />
    <nested-list v-model="items" :root-item="items[0]" />
  </div>
</template>

<script>
import NavLink from './NavItem.vue';
import NestedList from './NestedList.vue';

export default {
  components: {
    NavLink,
    NestedList
  },
  data() {
    return {
      items: [
        // 初始化数据
      ]
    };
  }
};
</script>

现在，当你点击导航菜单项时，对应的二级菜单会被显示或隐藏。Vue 3提供了一种声明式的语法，使得状态管理更为直观。