這篇文章給大家分享的是有關vue中如何實現(xiàn)左側菜單,樹形圖遞歸的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)專注于黑河企業(yè)網(wǎng)站建設,成都響應式網(wǎng)站建設公司,成都商城網(wǎng)站開發(fā)。黑河網(wǎng)站建設公司,為黑河等地區(qū)提供建站服務。全流程定制制作，專業(yè)設計，全程項目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務

效果圖如下所示：

先說說遇到的坑，由于是子父組件，當時傳遞使用的是子父組件的傳遞，但是這時候只能獲取到第一層的數(shù)據(jù)，第二層往后獲取不到數(shù)據(jù)，踩了一下午坑以后才知道，子組件使用了遞歸組件，這時候他已經(jīng)不能往父組件傳遞了，子傳父，只能逐層傳遞這時候已經(jīng)隔層了，所以我使用了非子父組件傳遞，兩個頁面都引入bus.js，這里不懂的請百度。

bus.js

import Vue from 'vue'
export default new Vue

父組件內(nèi)容

模擬后臺數(shù)據(jù)

theModel:[{
 'id': '1',
 'menuName': '導航1',
 'menuCode': '10',
'menuUrl':'',
 'childMenus': [
 {
 'menuName': '用戶管理',
 'menuCode': '11',
'menuUrl':'/home',
'menuPath':'',
'childMenus':[{
 'menuName': '11111',
 'menuCode': '12',
'menuUrl':'/systemjuri',
'menuPath':'',
 'childMenus': []
 }]
 },
 {
 'menuName': '角色管理',
 'menuCode': '12',
'menuUrl':'/systemjuri',
'menuPath':'',
 'childMenus': []
 },
 {
 'menuName': '菜單管理',
'menuUrl':'/systemmenu',
 'menuCode': '13',
'menuPath':'http://10.63.195.214:8080/menuManage/html/index_3.html',
'childMenus':[]
 }]
 },{
'id': '1',
 'menuName': '導航2',
 'menuCode': '10',
 'childMenus':[]
}],

父組件引入子組件

import myTree from './treeMenu.vue'
export default {
  components: {
  myTree
  },
}

父組件接受子組件傳遞的數(shù)據(jù)

bus.$on("childEvent", function(transmit) {})

下面是子組件內(nèi)容，子組件名稱treeMenu，name: 'treeMenu',

由于用了遞歸組件所以name需要和對應起來。

感謝各位的閱讀！關于“vue中如何實現(xiàn)左側菜單,樹形圖遞歸”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！