1 使用脚手架工具用 webpack 模板初始化项目，用 webstorm 打开项目。src 目录下是要编写的源文件。

main.js 文件 是主入口文件，

在es6语法中，：function(){}可以简写为(){}

在vue-cli中定义data时，不再是对象，而是以function函数的形式返回对象

template模板下只能有一个子节点，否则会报错

我将 App.vue 改名为TodoList.vue 因此修改 main.js 文件，

import TodoList from './TodoList'...components: {    todoList:TodoList  },

main.js 文件内容如下

// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import TodoList from './TodoList'Vue.config.productionTip = false/* eslint-disable no-new */new Vue({  el: '#app',  components: {    todoList:TodoList  },  template: '
      '})

 

2 组件的属性内容现在写到 export default{} 对象中

在 vue 文件中将模板放在 <template> 标签下

将脚本内容放到 <script> 标签下

TodoList 组件内容如下

 

在该组件中引用了 TodoItem 组件。在本组件中需要引入该组件， 使用 components 属性，引用一个对象。该对象的键是在该组件的名称，值是引用的组件名称。

对于 components 对象中的每个属性来说，其属性名就是自定义元素的名字，其属性值就是这个组件的选项对象。 

 

3 子组件写法和上面一样

TodoItem.vue 文件内容如下

 

4 父子组件之间传递消息的方式和之前的博文一致。参看

 

5 最后的效果如下