vue3的todoList案例

vue3的练习demo

1、todo.vue 父组件

<template>
   <!--子传父用自定义事件，父传子用自定义属性-->
  <todo-header @addTask="addTask"></todo-header>
  <todo-list :arrTask="arrTask" @delTask="delTask"></todo-list>
</template>
<script>
//引入两个子组件
import todoHeader from '@/views/todoHeader.vue'
import todoList from '@/views/todoList.vue'
import {defineComponent,ref} from 'vue'
export default defineComponent({
  name: 'Todo',
  components:{todoHeader,todoList},
  setup(){
    let arrTask=ref([
      {
        name:'工作摸鱼',
        complete:false
      },
        {
        name:'干饭',
        complete:false
      },
        {
        name:'国庆放假',
        complete:false
      }
    ])
    //定义添加任务的函数
    function addTask(val){
      //如果输入框输入的内容任务列表已存在则不添加
      let arr=arrTask.value.filter((item,index)=>{
        return item.name===val.name
      })
      if(arr.length===0){
        arrTask.value.push(val)
      }
    }
    //删除指定的任务
    function delTask(val){
      arrTask.value=arrTask.value.filter((item,index)=>{
        return index!==val
      })
    }
    return {
      arrTask,
      addTask,
      delTask
    }
  }
})
</script>

2、头部子组件–输入框

<template>
  <input v-model="task" @keyup.enter="addTaskList">
</template>
<script>
import {defineComponent,ref} from 'vue'
export default defineComponent({
  //此处是将ctx解构了，本身有三个属性分别是attrs,slots,emit
  //注意props不能解构，如果解构的话就没有响应式了
  setup(props,{emit}){
    let task=ref('')
    function addTaskList(){
      emit('addTask',{
        name:task.value,
        complete:false
      })
      //清空输入框内容
      task.value=""
    }
    return {
      task,
      addTaskList
    }
  }
})
</script>

3、任务子组件—任务列表

<template>
  <ul>
    <li v-for="(item,index) in arrTask" :key="index">
      <input type="checkbox" :checked="item.complete">
      <span>{{item.name}}</span>
      <button @click="delTask(index)">删除</button>
    </li>
  </ul>
</template>
<script>
import {defineComponent,ref} from 'vue'
export default defineComponent({
  props:{
    arrTask：Array
  },
  //如果想要在setup的props中获取arrTask的值，必须进行接收配置，否则获取的是undefined，即props:{}
  setup(props,{emit}){
    function delTask(index){
      emit("delTask",index)
    }
    return {
      delTask
    }
  }
})
</script>

效果展示：

该文章是本人在学习vue3的练习demo，如果有不规范的或者不正确的望指正