闭包的应用1（导航栏）

MenuCompontent.vue

<template>
  <div>
    <ul>
      <li v-for="(item, i) in menusArr" :key="i + 'aa'" @click.stop="toRouter(item)">
        {{ item.name }}
           <menu-compontent :menusArr="item.children" v-if="item.children">
        </menu-compontent>
      </li>
    </ul>
  </div>

</template>

<script>
import MenuCompontent from './MenuCompontent.vue'
export default {
   components:{
       MenuCompontent
  },
  name: "menu-compontent",
  props:['menusArr'],
  data() {
    return {};
  },
  methods:{
    toRouter(item) {
      console.log(item.path)

    },
  },
 
};
</script>

<style></style>

pag.vue

<template>
  <div>
    <menu-compontent :menusArr="menusArr"> </menu-compontent>

  </div>
</template>

<script>
import MenuCompontent from "./MenuCompontent.vue";
export default {
  components: {
    MenuCompontent
  },
  data() {
    return {
      //想要改造成的数据:
      menusArr: [
        {
          categoryId: 7,
          parent: 0,
          name: "test0",
          path:'/test0',
          children: [{ categoryId: 74, parent: 7, name: "test5",path:'/test5', }]
        },
        {
          categoryId: 8,
          parent: 0,
          name: "test1",
          path:'/test1',
          children: [
            { categoryId: 20, parent: 8, name: "test6",path:'/test6', },
            { categoryId: 21, parent: 8, name: "test7",path:'/test7', },
            { categoryId: 67, parent: 8, name: "test8",path:'/test8', }
          ]
        },
        {
          categoryId: 9,
          parent: 0,
          name: "test2",path:'/test2',
          children: [
            {
              categoryId: 185,
              parent: 9,
              name: "test9",
              path:'/test9',
              children: [
                { categoryId: 190, parent: 185, name: "test14",path:'/test14' },
                { categoryId: 191, parent: 185, name: "test15",path:'/test15' },
                { categoryId: 192, parent: 185, name: "test16",path:'/test16' }
              ]
            }
          ]
        },
        {
          categoryId: 68,
          parent: 0,
          name: "test3",
          path:'/test3',
          children: [
            { categoryId: 186, parent: 68, name: "test10",path:'/test10', },
            { categoryId: 187, parent: 68, name: "test11",path:'/test11', },
            { categoryId: 188, parent: 68, name: "test12",path:'/test12', },
            { categoryId: 189, parent: 68, name: "test13",path:'/test13', }
          ]
        },
        {
          categoryId: 349,
          parent: 0,
          name: "test4",
          path:'/test4',
          children: [
            { categoryId: 350, parent: 349, name: "test17",path:'/test17', },
            { categoryId: 351, parent: 349, name: "test18",path:'/test18', }
          ]
        }
      ]
    };
  },
  created() {

  },
  methods: {
  }
};
</script>

<style></style>