樹形結構菜單是一種經典的UI界面設計，可以讓用戶快速地瀏覽大量的數據并進行篩選。而Vue是現代的JavaScript框架，可以方便地構建用戶交互界面。

在Vue中，我們可以通過使用組件來實現樹形結構菜單。這個組件可以被封裝為獨立的模塊，以便在多個應用程序中重復使用。下面是一個示例代碼：

<template>
<ul>
<li v-for="item in items" :key="item.id">
{{ item.label }}
<my-tree :nodes="item.children" v-if="item.children" />
</li>
</ul>
</template>
<script>
export default {
name: 'MyTree',
props: {
nodes: {
type: Array,
required: true
}
},
data() {
return {
items: this.nodes
}
}
}
</script>

在這個示例中，我們定義了一個名為my-tree的組件。這個組件接收一個名為nodes的數組，這個數組包含了需要渲染的樹形節點。

在組件的template標簽中，我們使用了Vue的v-for指令來循環遍歷每一個節點。我們還使用了v-if指令來判斷某個節點是否有子節點，如果有的話就遞歸地調用自己的組件來渲染這些子節點。

在組件的script標簽中，我們采用了ES6的語法來定義了一個名為MyTree的組件。在組件實例化時，我們從props中獲取了傳遞進來的節點數組，并將它保存在組件中的items對象中。

為了使組件的使用更加方便，我們可以使用Vue的mixins來將一些相同的功能提取出來。下面是一個常用的樹形結構菜單的mixin代碼：

export default {
data() {
return {
expand: false
}
},
methods: {
toggleItem() {
this.expand = !this.expand
}
}
}

在上面的代碼中，我們定義了一個名為toggleItem的方法，可以用來展開或者收縮某個節點的子節點。我們還定義了一個名為expand的變量，用來存儲當前節點的展開狀態。

最后，我們將這個mixin混入到我們的組件中：

import treeMenuMixin from './mixins/treeMenu'
export default {
name: 'MyTree',
mixins: [treeMenuMixin],
props: {
nodes: {
type: Array,
required: true
}
},
...
}

樹形結構菜單是一種非常實用的UI設計，Vue作為一種現代的JavaScript框架，可以為我們提供非常方便的組件化開發方式。通過上面的示例代碼，相信讀者已經掌握了如何在Vue中構建樹形結構菜單的方法。