使用ivew-ui-plus 的Submit组件踩坑 injection “LoginInstance“ not found 记录 问题原因分析与解决方案

问题描述:

在下面这个页面中

注册按钮使用了view-ui-plus的Submit组件

结果控制台报错

runtime-core.esm-bundler.js:257 Uncaught TypeError: Cannot read properties of undefined (reading 'handleSubmit')
    at Proxy.handleSubmit (viewuiplus.min.esm.js:32610:26)
    at callWithErrorHandling (runtime-core.esm-bundler.js:195:19)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:202:17)
    at emit (runtime-core.esm-bundler.js:715:5)
    at Proxy.handleClickLink (viewuiplus.min.esm.js:6151:12)
    at callWithErrorHandling (runtime-core.esm-bundler.js:195:19)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:202:17)
    at HTMLButtonElement.invoker (runtime-dom.esm-bundler.js:693:5)

问题分析

顺藤摸瓜找到injection "LoginInstance" not found，看看代码，到底是哪里问题，没有用到LoginInstance这个组件啊

[Vue warn]: injection "LoginInstance" not found. 
  at <Submit onClick=fn<handleSubmit> > 
  at <FormItem> 
  at <IForm ref="formCustomRef" model= {deptId: '', account: '', password: '', confirmPassword: '', email: ''} rules= {account: Array(1), email: Array(2), deptId: Array(1), password: Array(1), confirmPassword: Array(1)}  ... > 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <Anonymous key="/register" vnode= {__v_isVNode: true, __v_skip: true, type: {...}, props: {...}, key: null, ...} route= {fullPath: '/register', hash: '', query: {...}, name: 'register', path: '/register', ...}  ... > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage> 
  at <Login ref=Ref< undefined > > 
  at <LayoutLoader key="login" layoutProps= {ref: RefImpl} name="login" > 
  at <NuxtLayoutProvider layoutProps= {ref: RefImpl} key="login" name="login"  ... > 
  at <NuxtLayout> 
  at <App key=3 > 
  at <NuxtRoot>

翻了翻官方的文档，原来是这个问题

问题解决

将<Submit>改为<Button>就OK了！

没有无缘无故的爱，也没有无缘无故的恨，凡事都有原因，一层层去扒，总会找到解决问题的办法哒！