44TodoList 使用组件自定义事件_ @ _处理父子数据交互问题

TodoList 使用组件自定义事件_ @ _处理父子数据交互问题

1.父组件

<template>
    <div class="todo-container">
        <div class="todo-wrap">
            <MyHeader @addTodo="addTodo"></MyHeader>
        </div>
    </div>
</template>

<script>
    import MyHeader from './components/MyHeader';

    export default {
        name:'App',
        components:{MyHeader,MyList,MyFooter},
        data(){
            return {
                todos:JSON.parse( localStorage.getItem('todos')) || [],
            }
        },
        methods:{
            addTodo(todo){
                this.todos.unshift(todo);      
            }
        },
        watch:{
            todos:{
                deep:true,
                handler(todo){
                    localStorage.setItem('todos',JSON.stringify(todo))
                }
            }
        }
    }
</script>

2.子组件

<template>
    <div class="todo-header">
        <input type="text" placeholder="请输入你的任务名称，按回车键确认" v-model="title" @keyup.enter="createTodo"/>
    </div>
</template>

<script>
    import {nanoid} from 'nanoid';
    export default {
        name:'MyHeader',
        data() {
            return {
                title:''
            }
        },
        methods:{
            createTodo(){
                if(!this.title.trim()) return alert('请输入有效值...');
                let todo = {tid:nanoid(),title:this.title.trim(),done:false};
                this.$emit('addTodo',todo);
                this.title = '';
            },
        },     
    }
</script>