使用 vue-cli 实现组件之间数据交换

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: '<todoList></todoList>'
})

View Code