Vue学习：todolist -按下回车添加内容

安装nanoid作为生成id的插件 uuid的替代者

npm i nanoid

希望将header组件的对象 传入其他组件 <需要传入的组件 参数》

但是在list 组件无法做到 因为header很明显无法引入list标签 ，所以将保存的数据放到app组件中 父组件，另外使用的方法不能重名 因为都是在vue实例对象上的属性和方法 props具有高的优先级

app.vue上 定义了一个方法用来接收子组件的参数，和保存的全部数据--用作传递表单的

<template>

    <div id="root">
        <div class="todo-container">
            <div class="todo-wrap">
                <!-- 传递函数 -->
                <myHeader :receive="receive"/>
                <List :todos="todos"/>
                <myFooter />
            </div>
        </div>
    </div>
</template>

<script>
    //引入<School/>组件
    // header不能取名会于内置标签冲突
    import myHeader from './components/myHeader'
    import List from './components/List'
    import myFooter from './components/myFooter'
    export default {
        name: 'App',
        //注册组件
        components: {
            myHeader,
            List,
            myFooter
        },
        data() {
            return {
                todos:[
                    {id:'0001',title:'吃饭',done:true},
                    {id:'0002',title:'打游戏',done:true},
                    {id:'0003',title:'学习',done:false},
                    {id:'0004',title:'上课',done:true},
                ],
            };
        },
        methods: {
            receive(x){
               // console.log('APP收到的数据为：',x)
                // unshift vue可以捕获到对数据的修改
                this.todos.unshift(x)
            }
        },

    };
</script>

list.js 接收来自父元素的参数 需要传递给item对象

<template>
    <ul class="todo-main">
        <Item v-for="todo in todos" :key="todo.id" :todo="todo"/>
       
    </ul>
</template>
<script>
    import Item from './Item'
    export default {
        name: 'List',
        components: {
            Item,
        },
        props:['todos']

    }

并且显示在item上 在对象上进行显示

    <li>
        <label>
            <!-- :checked动态绑定 --->
            <input type="checkbox" :checked="todo.done"/>
            <span>{{todo.title}}</span>
        </label>
        <button class="btn btn-danger" style="display:none">删除</button>
    </li>


</template>
<script>
    export default {
        name: 'Item',
        props:['todo']

    }
</script>

app上定义的方法传递给了header 然后在实例上调用 该方法 接收实例上的参数 作为输入

然后在app上进行操作

<template>
    <div class="todo-header">
        <input type="text" placeholder="请输入你的任务名称，按回车键确认" v-model="title" @keyup.enter="add"/>
    </div>
</template>
<script>
    import {nanoid} from 'nanoid'
    export default {
        name: 'myHeader',
        props:['receive'],
        data() {
            return {
                title: '',
            };
        },
        methods: {
            add(){
                //去掉前后空格
                if(!this.title.trim()) return alert('输入无效')
                //将用户的输入变成用户的todo对象
                // uuid生成全球唯一 id title:e.target.value,
                const todoObj={id:nanoid(),title:this.title,done:false}
               this.receive(todoObj)
              // e.target.value=''//清空
              this.value=''

            }
        },

    }