Todo—list案例

组件化编码流程

1. 实现静态组件：抽取组件，使用组件实现静态页面效果
   1. 组件按照其功能点进行拆分
   2. 组件命名不与HTML原有标签名冲突
2. 展示动态数据
   1. 数据的类型、名称
   2. 数据保存的组件
3. 交互——绑定事件监听

组件间通信（初始）

父传子

props方法

子传父

props方式

1. 父组件定义一个方法并将该方法传给子组件
2. 子组件接收该方法
3. 子组件将需要传递的内容作为参数，调用父组件传入的方法
4. 父组件对接收到的内容进行相应操作
5. 若props方法中传来的数据为对象类型时，仅对对象中的某一个或多个属性的值进行修改时，Vue默认此为不改变props值，不进行报错提示（不推荐使用）

父组件

<MyHeader :addTodo="addTodo"></MyHeader>
    methods:{
        addTodo(todo){
            this.todoArr.unshift((todo))
        }
    }

子组件

props:['addTodo'],
    data(){
        return{
            title:''
        }
    },
    methods:{
        add(e){
            // 将用户的输入包装为一个对象
            if (!this.title) return alert('列表不能为空')
            const todoObj={id:nanoid(),tittle:this.title,done:false}
            // console.log(todoObj)
            // 调用添加函数
            this.addTodo(todoObj)
            // 清空输入框
            this.title=null

        }
    }
<input type="text" placeholder="请输入任务名称，按回车键确认" v-model="title" @keyup.enter="add">