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的两个子组件,为了不让父组件显得臃肿,被单独拎了出来,