Vue 02- Vue如何实现数据共享

基础概念

1. 什么是Vue的组件？

组件是可复用的 Vue 实例, 把一些公共的模块抽取出来，然后写成单独的的工具组件或者页面，在需要的页面中就直接引入即可那么我们可以将其抽出为一个组件进行复用。例如 页面头部、侧边、内容区，尾部，上传图片，等多个页面要用到一样的就可以做成组件，提高了代码的复用率。

2.什么是子组件，什么是父组件？

子组件在父组件的 template 属性或者是模板中。

Vue传值的方式

1. 子向父传值，通过通过props关键字接收

父组件：

<template>
  <div id="root">
    <div class="todo-container">
      <div class="todo-wrap">
        <Header :addTodo="addTodo"></Header>
        <List :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo"></List>
        <Footer :todos="todos" :checkAllTodo="checkAllTodo" :clearAllTodo="clearAllTodo"></Footer>
      </div>
    </div>
  </div>
</template>

<script