在Vue的應(yīng)用中，菜單是一個(gè)非常常見的組件。對(duì)于復(fù)雜菜單，我們往往需要一個(gè)數(shù)據(jù)結(jié)構(gòu)來描述。

export default [{
title: '菜單1',
children: [{
title: '子菜單1'
}, {
title: '子菜單2',
children: [{
title: '子菜單2-1'
},{
title: '子菜單2-2'
}]
}]
}, {
title: '菜單2',
children: [{
title: '子菜單3'
}]
}];

這是一個(gè)簡單的Vue菜單結(jié)構(gòu)數(shù)據(jù)。每個(gè)菜單項(xiàng)通常會(huì)包括一個(gè)標(biāo)題和一個(gè)子菜單（如果有的話），子菜單也可以包括其他子菜單。

對(duì)于這個(gè)數(shù)據(jù)結(jié)構(gòu)，我們可以使用遞歸組件來渲染。下面是一個(gè)簡單的例子：

<template>
<ul>
<li v-for="item in items">
{{ item.title }}
<TreeView :items="item.children" v-if="item.children" />
</li>
</ul>
</template>
<script>
import TreeView from '@/components/TreeView.vue';
export default {
name: 'TreeView',
components: {
TreeView
},
props: {
items: {
type: Array,
required: true
}
}
};
</script>

在這個(gè)例子中，我們定義了一個(gè)名為TreeView的組件。這個(gè)組件接收一個(gè)名為items的props，用來渲染菜單。我們使用v-for指令來遍歷菜單項(xiàng)，如果當(dāng)前項(xiàng)有子菜單，我們使用遞歸調(diào)用TreeView組件。