卡比记账项目——父组件调用子组件的API

104 阅读1分钟

继续上节内容的末尾

截屏2022-11-11 09.51.41.png

问题出现

我们输入邮箱后点击发送验证码,正常的流程是:发送一个请求,这个请求如果成功了就去进行倒计时,如果请求发送失败那么就不应该进行倒计时。 这个控制是否倒计时的东西是由发请求的部分决定。回到代码,我们的请求是在signinpage里面进行发送的,如果失败了给他一个catch。 但是成功时没法进行倒计时,因为倒计时是在FormItem中完成的。这时我们需要让父组件支持使用子组件的API。

如何解决

思路:来到FromItem的组件,我们需要暴露出一个开始计时的API。 把倒计时的部分进行一个函数的封装取名startCount

截屏2022-11-11 10.06.35.png

点击发送验证码的按钮的事件逻辑更新为先触发父组件的点击事件,再请求发送成功后进行被动的倒计时。不能在触发点击事件后立马倒计时,所以这个函数没有存在意义了

截屏2022-11-11 10.09.32.png

这时点击就回到了之前的代码,那么如何将startCount暴露出去呢。 我们可以使用context

他有expose方法,参数是Record,key是string,value是任意 截屏2022-11-11 10.12.15.png

截屏2022-11-11 10.14.25.png 这样的话FormItem组件就向外部暴露了一个startCount的方法

外部引用 首先用ref引用,声明一个ref变量

const refValidationCode = ref()//默认为空

然后引用

截屏2022-11-11 10.17.30.png

在请求发送成功后调用这个ref

截屏2022-11-11 10.19.22.png

就可以实现了