树展示 移动端_移动端树形组件的实现

1、前言

这个构想实际上来源于一个全选的组件；即一开始的目的是做一个全选组件，然后在完成的时候被告知可能有多层级列表的情况；由于项目所用的vux组件库没有tree这个组件；于是干脆想着改造一下尝试实现一个tree结构。

2、实现

2.1、局限和前提

2.1.1，发现无法在子节点里直接修改节点的props传过来的值了

解决方案：

在每一层子节点的data属性里定义一个变量，用于存储深拷贝(props传过来的值)后的值

深拷贝方法用Object.assign

2.1.2，由于无法直接在子节点里直接修改props传过来的值，那么会出现以下情况

1)子节点里的状态发生变更时，得一层一层冒泡到根节点才能去修改当前Tree渲染的数据源里对应的分支节点的数据，因为，对于每一层子节点而言，它的数据源来源于上一节点通过props传过来的数据

2)深拷贝虽然解决了在子节点的作用域下的一些状态无法发生变更(这句话的意思是，比如当前节点有一个属性控制下一分支列表的显隐，那么当该分支列表的结构层的渲染数据直接取得props传过来的data，由于该data不能修改，那么该属性控制显隐的功能就失效了)

但是同时也带来了父节点与子节点的解耦，当父节点的数据源发生变更时，如果不去watch的话，是没办法及时通知子节点发生对应属性的变更的；而vue的生命周期在组件层次只有mounted可以用，而该生命周期在一次会话里只会执行一次，即父节点的变动不会引发子节点的mounted周期；(若是想，似乎可以考虑在父节点引用的子节点出绑定一个key)

即

2.2、树组件的