我的todo日记3（项目结构分析）

todo文件夹外部的结构及作用，我感觉图里面已经说得比较清楚了，重点是在几个配置文件；现在来看看todo里面是个怎么回事。todo文件夹里面是整个项目用户界面的构建所需的全部组件，最重要的就是理清各组件之间的逻辑关系，尤其是有父子关系的组件之间，应该在哪放置逻辑代码使代码易维护，是要事先考虑好的。

• footer.jsx和header.vue
  这两个组件基本就是装饰意义，只用在.vue写好标签及样式就好；由于.jsx认识JS、标签，却不认识css，所以里面写好标签框架，填好要填的数据就行，样式通过引入.styl就好。

• todo.vue

  这里是核心代码区！包括输入栏、item项状态管理、tabs事件与item状态的互动，刚刚说到的逻辑代码，主要就是放在todo.vue中，它与item/tabs形成父子关系，在同一组件中，父子组件通过props传递数据，父组件通过绑定监听来响应子组件的事件（可随时解耦），主逻辑（methods）留在父组件中，这样做在数据引用上不易出错，也方便维护修改。

• item.vue和tabs.vue
  首先我们要明确，tabs的事件会触发item的变化！这也是为什么数据操作要放在todo.vue的原因。 它们是todo.vue的两个子组件，为了不让父组件显得臃肿，被单独拎了出来，