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和javascript的区别是什么

vue treeselect树形下拉框之获取选中节点的ids和lables操作

vue怎么引用css

如何解决vue文件里使用背景报错问题

js proxy 的优势以及使用场景

vue项目全局使用axios的方法介绍

vue1.0与2.0有什么区别

vue-cli项目怎么使用vw单位?

vue组件中如何引入css文件

vuex中常用知识点(总结)

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




打赏

取消

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

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

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

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

评论

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