Vue 实现树形视图数据功能(2)

一开始的实现方法,利用组件递归,显示出当前级的name渲染出来,并将其中的 children 中的所有对象 传给自己然后接着执行相同操作,直到children没有数据,值得一提的是

,如果这里不加上 v-if 就会变成 死循环,就会一直执行下去,所以我们要判断一下当前执行的对象到底还有没有下一级

Vue 实现树形视图数据功能

这里我数据有稍微的改动,所以我第一次传入的数据就是(index.html页面)

Vue 实现树形视图数据功能


然后我定义了一个事件来处理 每一层的关闭和开启,我用弹框来查看Isopen 的值是否被改变

Vue 实现树形视图数据功能


我们看一下结果

刚进入页面时,括号中的undefined是 Isopen 当前的值,因为此时未被定义,所以为undefined

Vue 实现树形视图数据功能


然后我点击了A

Vue 实现树形视图数据功能


因为此时isopen已被反转值,所以此时isopen为true


但是页面仍毫无变化,不说展开功能,就连undefined也没变化



经过一番百度 ,发现原来是vue本身已经不允许这样直接更改 Props接受过来的值了

Vue2.0以后子组件不能更改父组件的值,只能通过子组件$emit(),父组件$on()进行响应更改

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/c1f5675cd72935fd3c972ad30622b161.html