VUE TS 根据JSON数据 动态创建menu菜单

在Vue.js中，结合TypeScript，如果你想根据JSON数据动态创建`<menu>`组件，你可以采用以下步骤：

1. 首先，在你的TypeScript组件中导入必要的库，如Vue、axios或其他用于获取JSON数据的库。

import Vue from 'vue';
import axios from 'axios';

2. 定义一个接口来描述你的JSON数据结构，假设菜单项有`title`和`children`属性。

interface MenuItem {
  title: string;
  children?: MenuItem[]; // 如果子菜单也是菜单，则是一个数组
}

3. 在`data()`函数中声明一个变量来存储菜单数据，并在`created()`生命周期钩子中从API或本地数据源获取JSON数据。

export default {
  data() {
    return {
      menuData: [] as MenuItem[], // 初始化为空数组
    };
  },
  created() {
    axios.get('/api/menu') // 替换为实际的API路径
      .then(response => (this.menuData = response.data))
      .catch(error => console.error('Error fetching menu:', error));
  },
};

4. 在模板部分，使用`v-for`循环遍历`menuData`，动态生成`<menu>`元素。

<template>
  <div>
    <ul v-for="(item, index) in menuData" :key="index">
      <li>{{ item.title }}
        <!-- 使用递归或者条件渲染处理子菜单 -->
        <slot v-if="item.children"> <!-- 子菜单部分 -->
          <ul>
            <li v-for="child in item.children" :key="child.title">
              {{ child.title }}
            </li>
          </ul>
        </slot>
      </li>
    </ul>
  </div>
</template>

5. 这样，每次`menuData`更新，对应的菜单项都会动态地被添加到页面上。注意如果子菜单存在，可以使用递归来处理子菜单的显示。