Vue —— 浏览器本地存储、组件自定义事件

第一种方式

App.vue

<template>
  <TodoFooter @checkAllTodo="checkAllTodo" @clearAllTodo="clearAllTodo"/>
</template>

<script>
        methods:{
          //全选 or 全不选
          checkAllTodo(done){
            this.todos.forEach((todo)=>{
              todo.done = done
            })
          },
          //清除所有已经完成的todo
          clearAllTodo(){
            this.todos = this.todos.filter((todo)=>{
              return !todo.done
            })
          }
        },
    }
</script>

TodoFooter.vue

methods:{
    checkAll(e){
    
      this.$emit('checkAllTodo',e.target.checked)			
      //触发组件自定义事件：checkAllTodo，并把e.target.checked作为参数传递给父组件App去执行checkAllTodo
      
    },
    //清除所有已经完成的todo
    clearAll(){
    
     	if(confirm('确定删除吗？')){
     	this.$emit('clearAllTodo')
     	//触发组件自定义事件：checkAllTodo，父组件App去执行checkAllTodo
     	 
	}
}

第二种方法

App.vue

<template>
      <TodoHeader ref="todoHeader"/>
</template>

<script>
  methods:{
      addTodo(todoObj){
         this.todos.unshift(todoObj)
      },
      mounted(){
        this.$refs.todoHeader.$on('add',this.addTodo)	//这样子绑定组件事件更灵活
      }
	}
</script>

TodoHeader.vue

<script>
...
    addTodo(e){
        ...
        this.$emit('add',todoObj)	//触发绑定事件，并传参
     }
</script>