隨著Web應用開發的日益普及，前端開發語言變得越來越多樣化，而Vue.js則是現在Web開發中最流行的前端框架之一，它被廣泛用于構建交互性和復雜性高的單頁Web應用（SPA）。

其中，折疊菜單是Vue.js中一個常見的組件，通常用于隱藏和顯示菜單內容，使用戶能夠更快速地找到自己需要的內容。Vue.js提供了一個非常靈活的方式來開發折疊菜單。下面，我們將介紹如何使用Vue.js封裝一個簡單的折疊菜單組件。

<template>
<ul>
<li v-for="(item, index) in list" :key="index">
<div v-if="item.children">
<span @click="toggle(index)" :class="{active: item.active}">{{item.label}}</span>
<ul v-show="item.active">
<li v-for="child in item.children" :key="child.id">{{child.label}}</li>
</ul>
</div>
<div v-else>{{item.label}}</div>
</li>
</ul>
</template>
<script>
export default {
name: 'CollapseMenu',
props: {
list: {
type: Array,
required: true
},
defaultActive: {
type: [Number, String],
default: 0
}
},
data () {
return {
active: this.defaultActive
}
},
methods: {
toggle (index) {
if (this.active === index) {
this.active = null
} else {
this.active = index
}
}
}
}
</script>

以上是一個基本的折疊菜單的代碼。首先，我們定義一個CollapseMenu組件，它接收兩個props：list和defaultActive。list是一個數組，其中每個項包含一個label和一個children屬性，children屬性可以是空或包含子菜單的數組。defaultActive是一個數字或字符串，指定默認應該展開哪個菜單項。

組件的核心是ul和li標簽，其中每個li標簽都對應數組中的一個菜單項。因為children屬性可能不存在，所以我們需要通過v-if指令判斷是否有子菜單。如果有，我們會在父菜單標簽中加入一個標簽，它包含一個@click指令，當用戶點擊菜單時，toggle方法會得到執行，該方法會更改active數據屬性。如果該菜單的active值為true，則該菜單項的子菜單才會處于顯示狀態。

以上是Vue.js封裝折疊菜單的全部詳細過程。折疊菜單是編寫Web應用過程中一個非常有用的組件，我們有時需要它來提高用戶體驗，加快用戶的查找速度。Vue.js提供了優秀的封裝組件思路，讓我們可以輕松構建復雜的Web界面。