Vue3 小白的学习笔记之todo 四

「这是我参与2022首次更文挑战的第27天，活动详情查看：2022首次更文挑战」

课程背景

• 我是一名前端小白 开发过程中用到了vue
• 所以我才来学习 了解一下vue3
• 这是一篇跟着教程走的笔记 不具备什么高深的操作
• 不过比你看官方教程应该能省点事

正文开始

上一节中我们接收到了父组件传递的值。本节的一个重要知识点，就是v-model实现父子组件内部数据同步

1 子组件中定义方法

这样就实现了 active属性的数据同步。

发现此时，我们的列表数据是根据active的值进行变化跟切换的。所以这里我们使用到了计算属性，监听active的值，并根据这个值进行列表的切换。

项目完整代码

app.vue

<template>
  <div>
    <h1>App根组件</h1>
    <hr>
    <TodoInput @add="dealAdd"></TodoInput>

    <TodoList :list="taskList"></TodoList>

    <TodoButton v-model:active="activeIndex"></TodoButton>
  </div>
</template>

<script>
import TodoList from './components/todo-list/index.vue'
import TodoInput from './components/todo-input/index.vue'
import TodoButton from './components/todo-button/index.vue'

export default {
  name:'LiiyApp',
  data(){
    return {
      todolist:[
        {id:1,task:'周一早晨吃烧烤',down:true},
        {id:2,task:'周一晚上哈啤酒',down:false},
        {id:3,task:'周二早晨吃海鲜',down:false},
      ],
      nextId:4,
      activeIndex:0
    }
  },
  computed:{
    taskList(){
      switch(this.activeIndex){
        case 0 :
          return this.todolist
        case 1:
          return this.todolist.filter(x=>x.down)
        case 2 :
          return this.todolist.filter(x=>!x.down)
      }
    }
  },
  methods:{
    dealAdd(task){
      this.todolist.push({
        id:this.nextId,
        task:task,
        down:false
      })

      this.nextId ++
    }
  },
  components:{
    TodoList,
    TodoInput,
    TodoButton
  }
}
</script>
<style lang="less" scoped>

</style>

这样我们就完成了，todolist的基础案例。涉及到最基本的一些指令。涉及到一些知识点

• 父组件向子组件传值
• 子组件向父组件传值
• 父子组件数据同步
• 计算属性