卡比记账项目——Vue中ref和reactive

使用场景

一般比较简单的变量比如布尔我们会选择使用ref const a = ref(false) 比较复杂的变量比如对象可以选择使用reactive const formData = reactive({a:xxx,b:yyy})

本质上没有什么区别，都是代理变量。

选中tag

现在我们要实现能够选取tag。使用v-model来完成。 在Tag组件中添加v-model

进入Tags.tsx组件，props中添加一个selected属性，类型为Number。由于要适配v-model，所以还要加上emits。

添加onSelect事件

可以选择tag了

inputPad组件中 输入日期和数值

思路：依然选择两个v-model来进行双向绑定 定义两个ref分别用来标记记账时间以及记账金额。

并进行v-model

来到inputPad中，props加入这两个属性

所以我们不再需要原有的refDate，可以替代成happenAt，但是我们的new date是字符串，回到time.tsx让其支持字符串类型

触发事件改一下：

在inputPad的上面显示一下当前的时间

Amount金额

做金额不能像时间一样，不能在用户点击过程中就刷新，需要一个中间变量。 先在提交时添加事件，

测试一下：

但是在清零的时候是不能自动回0，需要再点击记账。同时vue也给了个警告，说type不对。

我们需要做一些调整

先把number变成string 提交时把string变回number 成功消除警告。

记账实现

现在已经做好了绝大部分功能，只差点击记账即可把数据记录在服务器了，现在进行实现。

回到ItemCreate，现在还没有监听提交。在InputPad上添加一个submit的监听。

到InputPad中props里面加入onSubmit，

点击记账时触发一下submit事件

在onSubmit中发送请求：

这样子写不好，所以我们用reactive对ref进行一个改写