Vue组件开发记事本

开发一个简单的记事本，计事本可分为五部分组件组成，app,header,list,item,footer.

先来了解一下vue的组件概念：

1.组件（component）是vue.js最强大的功能之一。组件的作用就是封装可重用的代码，通常一个组件就是一个功能体，便于在多个地方都能够调用这个功能体。 每个组件都是Vue的实例对象。 我们实例化的Vue对象就是一个组件，而且是所有组件的根组件。

2.vue组件包含全局组件和局部组件。

全局组件是在Vue.js应用程序中注册的件，可以在整个应用程序中使用。这意味着，无论在哪个组件中，都可以使用全局组件。全局组可以在Vue.js应用程序的任何地方使用，因此它们非常适合用于在整个应用程序中共享的组件，例如页头、页脚、导航栏等。

局部组件是在Vue.js组件中定义的组件，只能在该组件及其子组件中使用。这意味着，只有在该组件及其子组件中才能使用局部组件。局部组件通常用于特定的功能或特定的页面，因为它们只在该组件及其子组件中使用，所以它们不会与其他组件产生冲突。

局组件和局部组件的主要区别在于它们的作用域。全局组件可以在整个应用程序中使用，而局部组件只能在其定义的组件及其子组件中使用，并且写法有点不相同。

然后简绍下记事本怎么的结构功能以及代码实现：

 首先app组件负责维持各个组件的关系，包含有存储列表数据的json数组，对json数组增删改查的方法，但是由于触发增删改查操作的事件是在item，footer，和header组件中的（这些组件当中含有input，button这样的交互标签），所以需要向子组件通过传参的方式传递操作方法，以获取数据或接收到子组件的触发。

app组件代码：

<!-- App主组件，组合其它所有的子组件 -->
<template>
  <div class="appStyle">
    <!-- 向header组件传递函数，让reserve函数接收子组件Header的数据返回给Vue组件，需要注意函数这里不能带参数列表 -->
    <TodoHeader :add="add"/>
    <TodoList :todos="todos" :del="del"/>
    <TodoFooter :todos="todos" :delAllChecked="delAllChecked"/>
  </div>
</template>

<script>
import TodoHeader from './components/TodoHeader.vue'
import TodoList from './components/TodoList.vue'
import TodoFooter from './components/TodoFooter.vue'
export default {
  components: { TodoHeader, TodoList, TodoFooter },
  name:'App',
  data(){
    return{
      todos:[
        {id:'001',title:'唱',isChecked:false},
        {id:'002',title:'跳',isChe