Vue(十) 组件化编码流程

组件化编码流程

使用TodoList作为案例
第一步： 实现静态组件，使用组件实现静态页面功能； 拆分静态组件：组件要按照功能点拆分。
如图：

在这里导入的时候会有一个问题：

解决方法：命名不要与html元素冲突。
最后代码写完的目录如下，具体代码就不弄过来了，不然篇幅过长。

一、初始化列表

框的都是重要部分
MyList.vue

MyItem.vue

运行结果：

二、添加

1. id使用nanoid。 下载安装： npm i nanoid
   使用
   
2. 组件间的数据传递初级方法
   现在需要将MyHeader组件中添加的对象传送到MyList组件中。
   
   a.思路是将MyList组件中的todos[…]拿到APP组件中， 通过再APP组件将数据传到MyList中。
   
   b. 将MyHeader子组件的toboObj给父组件App（一般都是父给子传）===》 实现的方法，在APP中准备配置项methods,在里面配置一个receive()方法, 然后将方法给MyHeader组件传递过去 <MyHeader :receive="receive"/>主要的核心就是：在父亲那里定义一个函数，传给儿子， 儿子调用该函数，但是函数是在父亲那里的， 那么数据就会传到父亲身上。
   
   运行结果：
   
   c. 父亲收到参数之后，进行数组对象操作，this.todos.unshift() 插入列表中

注意一个细节：配置项里的数据变量命名不要一样，因为他会都会出现在VC(组件实例对象)上

三、勾选

1. MyItem.vue中的checkTodo()方法是App中所定义的方法，然后传递过来的，由于MyItem是嵌套在MyList的，所以MyList中间也接受APP的传递再传给MyItem。
2. @change方法是事件变化。事件变化后获得对象中的id，然后传递给checkTodo()方法，在App组件中进行操作。进行两者id的对比，找到取反即可
   
   
   
   一些注意细节：
   1.所以在App组件中定义操作的方法
   
3. 这种写法也可以动态修改todo.done中的值，但是不建议这么改，只是违背vue原则的
   
   因为props属性是只读不改的
   
   在Vue中
   
   所以为什么上面那种方法也可以动态修改，并且不报错的原因。