vue中递归组件的实现方法介绍(附实例:三级菜单)


本文摘自PHP中文网,作者青灯夜游,侵删。

下面Vue.js教程栏目通过实例制作一个三级菜单,来介绍vue中递归组件的实现方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

js里面有递归算法,同时,我们也可以利用props来实现vue模板的递归调用,但是前提是组件拥有 name 属性

父组件:slotDemo.vue:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

<template>

  <p>

    <!-----递归组件----->

    <ul>

      <simple3 :tree="item" v-for="item in tree"></simple3>

    </ul>

 

  </p>

</template>

<style lang="stylus" rel="stylesheet/stylus">

  li

   padding-left 30px

</style>

<script>

  import simple3 from "./simple/simple3.vue";

  export default{

    data(){

      return {

        tree: [{

          label: "一级菜单",

          test:1,

          children: [{

            label: "二级菜单",

            test:2,

            children: [{

              label: "三级菜单",

              test:3

            }]

          }]

        }]

      }

    },

 

    components: {

      

      simple3

    }

  }

</script>

  子组件:simple3.vue

阅读剩余部分

相关阅读 >>

vue cli是什么

vue怎么插入图片

vue.js监听键盘事件

代码详解vue中key的作用示例

vue 的 render 方法中 h 是什么?

vue通常在项目中干什么

怎么运行vue.js

vue中的nexttick原理

了解一下vue中的插槽

vue路由守卫哪几种?

更多相关阅读请进入《vue》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...