Vue+element实现todo（七—组件化）

在todolist内容中，我只把ul部分写成了子组件，因为公共部分也只有这部分

首先新建一个子组件as.vue（类名是因为项目比较简单，所以就没有刻意去取名），然后再定义输出接口，

image.png

，
然后在文件 父组件（也就是helloworld,vue） 中引入 import

image.png

，
然后再在父组件中使用这个模板

image.png

。
然后在把我们ul的代码复制过去

image.png

同时，去掉了 ul 标签上的 v-for 和绑定指令，因为我们这只是在定义组件，而不是像上面那样循环渲染组件，那我们子组件如何拿到父组件传过来的值就需要用到props

image.png

我们需要Item这个值，同时，我们还设置了item 数据的要求，即它的类型是一个 Object，而且必须传递，不能缺少。

接着我们还绑定了一个@click，我们这里绑定监听了一个 remove-todo 事件，这个事件组件中点击删除按钮触发的，但是它无法直接访问父组件的数据，而且组件的数据流向是单向的，只能从父组件通过 props 传到子组件，那么如何使组件中的操作反应到父组件上呢？
这里就需要用到$emit，

image.png

第一个是你给这个事件取得名字，同时时间还可以携带数据，这里我们把组件实例绑定的 item 也发送了出去。
定义了这个组件，我们就可以在应用中使用了，将原来渲染待办事项的 html 代码替换为自定义的组件：

image.png

一旦监听到这个事件被触发，就会调用父组件的removeto方法。
接着可以在父组件中这样写

image.png

把需要替换的地方替换掉。
另外，我们还家了这样一行代码（蓝框）

image.png

因为我们可能有的地方结构不太一样，例如在全部任务我们需要有一个双击编辑的作用，但是未完成和已完成是没有的，就需要给组件加一个插槽，说明这些地方我要点自己的东西，然后再父组件里

image.png

直接加上自己的代码就好了

最后打包上线

感觉组件还有很多需要学习的地方，个别地方写的有点乱....

线上访问地址
github地址