上图橙色线( todoObj 操作 todos:[…])的方法:

1. 全局实现总线
2. 消息订阅与发布
3. VueX

但是至今，我们还没有学习上面的任何一种方法。
最基础的方法：
todos:[…]不放在List组件中，而是放到Header和List组件的父亲上，然后 让 Header把数据从儿子给父亲App,再让父亲App给儿子List，如下图所示：

其中 子组件Header.vue 给 父组件App.vue 传递数据todoObj的方法理论：
父组件 先偷偷给 子组件 传递一个方法，然后 子组件 再把todoObj作为参数 调用接收到的该方法 传递给父组件。

源码

components/MyFooter.vue

<template>
    <div class="todo-footer">
        <label>
        <input type="checkbox"/>
        </label>
        <span>
        <span>已完成0</span> / 全部2
        </span>
        <button class="btn btn-danger">清除已完成任务</button>
    </div>
</template>

<script>
    export default {
        name:'MyFooter'
    }
</script>

<style scoped>
    /*footer*/
    .todo-footer {
        height: 40px;
        line-height: 40px;
        padding-left: 6px;
        margin-top: 5px;
    }

    .todo-footer label {
        display: inline-block;
        margin-right: 20px;
        cursor: pointer;
    }

    .todo-footer label input {
        position: relative;
        top: -1px;
        vertical-align: middle;
        margin-right: 5px;
    }

    .todo-footer button {
        float: right;
        margin-top: 5px;
    }
</style>

components/MyHeader.vue

<template>
    <div class="todo-header">

        <!-- 添加一个键盘事件 
        <input type="text" placeholder="请输入你的任务名称，按回车键确认" v-model="title" @keyup.enter="add"/>
        -->
        <!-- 添加一个双向绑定的属性 title-->
        <input type="text" placeholder="请输入你的任务名称，按回车键确认" v-model="title" @keyup.enter="add" />
    </div>
</template>

<script>
    //引入 nanoid ，是 uuid 的一个mini版本。 如果提示错误，需要安装 npm i nanoid
    import {nanoid} from 'nanoid'

    export default {
        name:'MyHeader',
        data() {
            return {
                title:''
            }
        },

        //因为父组件 App.vue 传递过来一个函数 addTodo, 所以我这里需要接收一下:
        props:['addTodo'],    //那么此时一接收, addTodo 方法就出现在了 MyHeader 身上了。

        methods: {
            add(e){
                //console.log(this.title)
                //console.log(e.target.value)

                //
                if(!this.title.trim())    return alert('输入不能为空')

                //将 用户的输入 包装成一个 todo对象
                const todoObj = {id:nanoid(), title:e.target.value, done:false}
                console.log(todoObj)

                //上面通过 props 接收到了 父组件传递过来的 receive()函数, 所以就可以在此处把 todoObj 通过 receive() 传过去:
                this.addTodo(todoObj);

                //把输入框清空
                //e.target.value = ''
                //通过 title 清空
                this.title = ''

            }
        },



    }
</script>

<style scoped>
    /*header*/
    .todo-header input {
        width: 560px;
        height: 28px;
        font-size: 14px;
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 4px 7px;
    }

    .todo-header input:focus {
        outline: none;
        border-color: rgba(82, 168, 236, 0.8);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
    }
</style>

components/MyItem.vue

<template>
    <li>
        <label>
            <!-- 默认勾选 
            <input type="checkbox" checked/>
            -->
            <!-- :checked="true" 表示 我们想给 input 添加一个 checked 选项，如果为true就勾选，否则不勾选-->
            <input type="checkbox" :checked="todo.done"/>

            <!--span>xxxxx</span-->
            <!-- 通过插值语法 展示 接收到的 todo对象-->
            <span>{{ todo.title}}</span>

        </label>
        <button class="btn btn-danger" style="display:none">删除</button>
    </li>
</template>

<script>
    export default {
        name:'MyItem',

        //声明接收 todo 对象
        props:['todo'],

        mounted(){
            console.log(this.todo)
        }
    }
</script>

<style scoped>
    /*item*/
    li {
        list-style: none;
        height: 36px;
        line-height: 36px;
        padding: 0 5px;
        border-bottom: 1px solid #ddd;
    }

    li label {
        float: left;
        cursor: pointer;
    }

    li label li input {
        vertical-align: middle;
        margin-right: 6px;
        position: relative;
        top: -1px;
    }

    li button {
        float: right;
        display: none;
        margin-top: 3px;
    }

    li:before {
        content: initial;
    }

    li:last-child {
        border-bottom: none;
    }

    li:hover{
        background-color: #ddd;
    }

    li:hover button{
        display: block;
    }
</style>

components/MyList.vue

<template>
    <ul class="todo-main">
        <!-- 给 MyItem组件传数据 其中key可以随便定，但是value不能，此处的value只能 todoObj项
        todoObj 是做事的时候，每一个要做事的对象。

        :todo 给 key=todo 自定义属性 绑定 一个值为 todoObj
        -->
        <MyItem v-for="todoObj in todos" :key="todoObj.id" :todo="todoObj"/>
    </ul>
</template>

<script>
    import MyItem from './MyItem'

    export default {
        name:'MyList',
        components:{MyItem},

        /* 把该数据放到父亲App里:
        data(){
            return {
                todos :[
                    {id:'0001',title:'抽烟', done:true},
                    {id:'0002',title:'喝酒', done:false},
                    {id:'0003',title:'开车', done:true}
                ]
            }
        }
        */
        //父组件 App.vue既然传递过来的 todos, 那么此处需要接收一下:
        props:['todos']    //这样一写，那么这东西就会出现在 vc 中。 注意： todos 在 App.vue 中是在 data 中，而本文件的 todos 在 props 里。
    }
</script>

<style scoped>
    /*main*/
    .todo-main {
        margin-left: 0px;
        border: 1px solid #ddd;
        border-radius: 2px;
        padding: 0px;
    }

    .todo-empty {
        height: 40px;
        line-height: 40px;
        border: 1px solid #ddd;
        border-radius: 2px;
        padding-left: 5px;
        margin-top: 10px;
    }
</style>

App.vue

<template>
    <div id="root">
        <div class="todo-container">
            <div class="todo-wrap">

                <!-- 父组件App.vue 给 子组件MyHeader 传递了一个函数 addTodo() -->
                <!-- 把下面的方法 addTodo() 给子组件 MyHeader 
                    <MyHeader>            自定义组件标签名 
                    :（v-bind 简写）     动态绑定指令
                    addTodo    传递给 子组件MyHeader 的属性名（子组件通过 props接收）
                    "addTodo"    父组件App.vue 中 methods 里的方法名
                -->
                <MyHeader :addTodo="addTodo"/>

                <!-- 父组件App.vue 给 子组件MyList 传递了一个属性 todos -->
                <!-- 将父组件的 todos 数据传递给子组件 
                    <MyList>    自定义组件标签名 
                    :（v-bind 简写）    动态绑定指令
                    todos    传递给子组件的属性名（子组件通过 props接收）
                    "todos"    父组件 data 中的属性名（数据来源）
                -->
                <MyList :todos="todos"/>

                <MyFooter/>

            </div>
        </div>
    </div>
</template>

<script>
    import MyHeader from './components/MyHeader.vue'
    import MyFooter from './components/MyFooter.vue'
    import MyList from './components/MyList.vue'


    export default {
        name:'App',
        components:{
            MyHeader,
            MyList,
            MyFooter
        },

        //从MyList.vue里，将 data() 移到这里。
        data(){
            return {
                todos :[
                    {id:'0001',title:'抽烟', done:true},
                    {id:'0002',title:'喝酒', done:false},
                    {id:'0003',title:'开车', done:true}
                ]
            }
        },

        //如果想实现 子组件 MyHeader.vue 传递数据 给 父组件App.vue，那么就在 此处父组件位置，准备好一个方法。
        methods: {
            addTodo(todoObj){
                console.log('我是 App组件, 我收到了数据:', todoObj)

                //父组件App.vue 在接收到 子组件MyHeader.vue 传递过来的参数x 之后，再传递给 子组件MyList.vue
                this.todos.unshift(todoObj)
            }
        }
    }


</script>

<style>
    /*base*/
    body {
        background: #fff;
    }

    .btn {
        display: inline-block;
        padding: 4px 12px;
        margin-bottom: 0;
        font-size: 14px;
        line-height: 20px;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
        border-radius: 4px;
    }

    .btn-danger {
        color: #fff;
        background-color: #da4f49;
        border: 1px solid #bd362f;
    }

    .btn-danger:hover {
        color: #fff;
        background-color: #bd362f;
    }

    .btn:focus {
        outline: none;
    }

    .todo-container {
        width: 600px;
        margin: 0 auto;
    }
    .todo-container .todo-wrap {
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
    }

    /*header*/
    .todo-header input {
        width: 560px;
        height: 28px;
        font-size: 14px;
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 4px 7px;
    }

    .todo-header input:focus {
        outline: none;
        border-color: rgba(82, 168, 236, 0.8);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
    }

    /*main*/
    .todo-main {
        margin-left: 0px;
        border: 1px solid #ddd;
        border-radius: 2px;
        padding: 0px;
    }

    .todo-empty {
        height: 40px;
        line-height: 40px;
        border: 1px solid #ddd;
        border-radius: 2px;
        padding-left: 5px;
        margin-top: 10px;
    }
    /*item*/
    li {
        list-style: none;
        height: 36px;
        line-height: 36px;
        padding: 0 5px;
        border-bottom: 1px solid #ddd;
    }

    li label {
        float: left;
        cursor: pointer;
    }

    li label li input {
        vertical-align: middle;
        margin-right: 6px;
        position: relative;
        top: -1px;
    }

    li button {
        float: right;
        display: none;
        margin-top: 3px;
    }

    li:before {
        content: initial;
    }

    li:last-child {
        border-bottom: none;
    }

    /*footer*/
    .todo-footer {
        height: 40px;
        line-height: 40px;
        padding-left: 6px;
        margin-top: 5px;
    }

    .todo-footer label {
        display: inline-block;
        margin-right: 20px;
        cursor: pointer;
    }

    .todo-footer label input {
        position: relative;
        top: -1px;
        vertical-align: middle;
        margin-right: 5px;
    }

    .todo-footer button {
        float: right;
        margin-top: 5px;
    }

</style>

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

//创建vm
new Vue({
    el:'#app',
    render: h => h(App)
})