一，动态树形结构渲染

原型图

问题

1. 后台需要提供提供怎样的的数据结构
2. 页面渲染如何实现
3. 如何拿到输入框的值

解决思路

1. 每一条数据需要提供第一个select的options选项；后面的文本框需要输入类型；切换为区间输入的时候数据格式的切换，每条数据的唯一name属性。
2. 封装成组件，通过传入的optios渲染第一个select,根据传入的type类型，使用v-if渲染文本输入框。
3. 通过父组件v-for遍历得到的值通过props传个组件渲染，然后子组件通过在watch事件中通过emit将值返还给父组件，父组件通过eval方法，将name属性声明唯一对象和子组件相对应。

代码片段

父组件

子组件

    复制代码

二，递归树

原型图

问题

1. 添加事件，添加的对象是动态的，如何动态绑定
2. 结构是无限的，需要怎么实现。

解决思路

1. vue子父组件间的传值实际是同一块内存地址，因此在子组件内，是可以改变父组件的值（虽然官方并不提倡这种双向数据流）,父组件a.b对象通过props传个子组件，子组件对b对象进行修改，父组件的a.b对象也会改变
2. 可以使用递归的思想，当传入的对象，有子属性的时候，可以继续递归使用自身（需要声明name属性）

代码片段

父组件

    复制代码

代码片段

子组件

    复制代码