前端vue入门(纯代码)10

【10.TodoList-自定义事件】

TodoList案例的完整代码请点击此处粉色文字

• TodoList案例中的子组件TodoHeader给父组件App传递数据

• App.vue文件中需要修改的代码

  • 原本： Todo案例中子给父传递数据【通信】的方法：props

  <!-- 把App组件里的方法addTodo()传给TodoHeader组件【也需要用props去接受】 -->
  <TodoHeader :addTodo="addTodo"/>
  <TodoFooter
          :todos="todos"
          :checkAllTodo="checkAllTodo"
          :clearAllTodo="clearAllTodo"
          />
  

  • 修改后： 子给父传递数据【通信】的方法:利用自定事件 【addTodo,checkAllTodo,clearAllTodo】去通信

  <TodoHeader @addTodo="addTodo"/>
  <TodoFooter
          :todos="todos"
          @checkAllTodo="checkAllTodo"
          @clearAllTodo="clearAllTodo"
          />
  

• TodoHeader.vue文件中需要修改的代码

  • 原本： Todo案例中子给父传递数据【通信】的方法：props

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

    //接收从App组件【父组件】传递过来的addTodo方法
    props:['addTodo'], 
    methods: {
      add(){
        // 如果输入框里为空,就跳过下面的代码，并弹窗
        if (!this.title.trim()) return alert('请输入值')
        //将用户的输入包装成一个todo对象
        const todoObj={id:nanoid(),title:this.title,done:false}
        //通知App组件去添加一个todo对象
        this.addTodo(todoObj)
        //清空输入
        this.title = ''
      }
    },
  

  • 修改后： 子给父传递数据【通信】的方法:利用自定事件 【addTodo】去通信

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

    //不需要接收从App组件【父组件】传递过来的addTodo方法
    //props:['addTodo'], 
    methods: {
      add(){
        // 如果输入框里为空,就跳过下面的代码，并弹窗
        if (!this.title.trim()) return alert('请输入值')
        //将用户的输入包装成一个todo对象
        const todoObj={id:nanoid(),title:this.title,done:false}
        //通知App组件去添加一个todo对象
        
        //触发自定义事件addTodo，并把子组件中的参数todoObj传给父组件
        this.$emit('addTodo',todoObj)
        //清空输入
        this.title = ''
      }
    },
  

  

• TodoFooter.vue文件中需要修改的代码

  • 原本： Todo案例中子给父传递数据【通信】的方法：props

  <template>
  	<div class="todo-footer" v-show="total">
  		<label>
  			<input type="checkbox" v-model="isAll"/>
  		</label>
  		<span>
  			<span>已完成{{ doneTotal }}</span> / 全部{{ total }}
  		</span>
  		<button class="btn btn-danger" @click="clearAllDone">清除已完成任务</button>
  	</div>
  </template>
  
  <script>
  export default {
    name: 'TodoFooter',
    props: ['todos','checkAllTodo','clearAllTodo'],
    //如果是自定义事件的话，就需要把该删掉的东西【'checkAllTodo','clearAllTodo'】删掉  
    // props: ['todos'],
    computed:{
      //总数
      total(){
        return this.todos.length
      },
      // 已完成数
      doneTotal(){
        return this.todos.reduce((pre,todo)=>pre + (todo.done ? 1 : 0),0)
      },
      //控制全选框
      isAll:{
        //get有什么作用？当有人读取isAll时，get就会被调用，且返回值就作为isAll的值
  			//get什么时候调用？1.初次读取isAll时。2.所依赖的数据发生变化时。
        get(){
          //全选框是否勾选  【&&：且】
          return this.total === this.doneTotal && this.total>0
        },
        //set什么时候调用? 当isAll被修改时。
        // value就是：v-model绑定的值false【未勾选】 or true【勾选】
        set(value){
          console.log(value)
          this.checkAllTodo(value)
        }
      },
    },
    methods: {
      // 清空所有已完成
      clearAllDone(){
        this.clearAllTodo()
      }
    },
  };
  </script>
  

  • 修改后： 子给父传递数据【通信】的方法:利用自定事件 【checkAllTodo,clearAllTodo】去通信

  isAll:{
        //get有什么作用？当有人读取isAll时，get就会被调用，且返回值就作为isAll的值
  			//get什么时候调用？1.初次读取isAll时。2.所依赖的数据发生变化时。
        get(){
          //全选框是否勾选  【&&：且】
          return this.total === this.doneTotal && this.total>0
        },
        //set什么时候调用? 当isAll被修改时。
        // value就是：v-model绑定的值false【未勾选】 or true【勾选】
        set(value){
          console.log(value)
          this.$emit('checkAllTodo',value)
        }
      },  
  

      // 清空所有已完成
      clearAllDone(){
        // this.clearAllTodo()
        this.$emit('clearAllTodo')
      }