Vue3 小白的学习笔记之todo 三

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

课程背景

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

正文开始

上一节中我们写了 input组件的Ui，这里我们继续实现功能。

1 数据双向绑定 定义一个变量 title 并绑定到 input中

<input type="text" v-model.trim="title" class="form-control" placeholder="请输入任务">

注意 这里用的 .trim修饰，是为了能去掉首尾的空格。

2 发送数据到父组件

注意：这里使用了.prevent是阻止表单的提交

3 父组件中定义事件并接收参数

此时就可以看到子组件传递过来的值咯

4 我们在父组件中定义处理函数，将接受到的数据存到数组中即可。

5 新建boto-button组件，并编写基本的UI

<template>
  <div class="btn_box mt-3 text-center">
      <div class="btn-group">
        <button type="button" class="btn btn-primary">全部</button>
        <button type="button" class="btn btn-secondary">已完成</button>
        <button type="button" class="btn btn-secondary">未完成</button>
        </div>
  </div>
</template>

<script>
export default {
    name:"TodoButton"
}
</script>

<style lang="less" scoped>
    .btn_box{
    width:400px;
    }
</style>

6 父组件中定义 当前点击的 tab的索引号 并传递给子组件中

子组件中定义相应的属性值，并根据当前父组件中传递的值显示出相应的激活状态的按钮来。