前端vue入门(纯代码)10

10.TodoList-自定义事件

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

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

前端vue入门(纯代码)10_第1张图片

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

    • 原本 Todo案例中子给父传递数据【通信】的方法: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 = ''
        }
      },
    

    前端vue入门(纯代码)10_第2张图片

  • 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')
        }
    

    前端vue入门(纯代码)10_第3张图片

你可能感兴趣的:(Vue前端,前端,vue.js,javascript)