在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
因为我们可能有的地方结构不太一样，例如在全部任务我们需要有一个双击编辑的作用，但是未完成和已完成是没有的，就需要给组件加一个<slot></slot>插槽，说明这些地方我要点自己的东西，然后再父组件里
image.png
直接加上自己的代码就好了
最后打包上线
感觉组件还有很多需要学习的地方，个别地方写的有点乱....
