继续上节内容的末尾
问题出现
我们输入邮箱后点击发送验证码,正常的流程是:发送一个请求,这个请求如果成功了就去进行倒计时,如果请求发送失败那么就不应该进行倒计时。 这个控制是否倒计时的东西是由发请求的部分决定。回到代码,我们的请求是在signinpage里面进行发送的,如果失败了给他一个catch。 但是成功时没法进行倒计时,因为倒计时是在FormItem中完成的。这时我们需要让父组件支持使用子组件的API。
如何解决
思路:来到FromItem的组件,我们需要暴露出一个开始计时的API。 把倒计时的部分进行一个函数的封装取名startCount
点击发送验证码的按钮的事件逻辑更新为先触发父组件的点击事件,再请求发送成功后进行被动的倒计时。不能在触发点击事件后立马倒计时,所以这个函数没有存在意义了
这时点击就回到了之前的代码,那么如何将startCount暴露出去呢。 我们可以使用context
他有expose方法,参数是Record,key是string,value是任意
这样的话FormItem组件就向外部暴露了一个startCount的方法
外部引用 首先用ref引用,声明一个ref变量
const refValidationCode = ref()//默认为空
然后引用
在请求发送成功后调用这个ref
就可以实现了