關于vue3?解決getCurrentInstance?打包后線上環(huán)境報錯問題
getCurrentInstance
getCurrentInstance
支持訪問內部組件實例。
WARNING
getCurrentInstance
只暴露給高階使用場景,典型的比如在庫中。強烈反對在應用的代碼中使用getCurrentInstance
。請不要把它當作在組合式 API 中獲取this
的替代方案來使用。
import { getCurrentInstance } from 'vue' const MyComponent = { setup() { const internalInstance = getCurrentInstance() internalInstance.appContext.config.globalProperties // 訪問 globalProperties } }
打印信息:
getCurrentInstance
只能在setup或生命周期鉤子中調用。
如需在 setup或生命周期鉤子外使用,請先在
setup
中調用getCurrentInstance()
獲取該實例然后再使用。
setup() { const internalInstance = getCurrentInstance() // 有效 const id = useComponentId() // 有效 const handleClick = () => { getCurrentInstance() // 無效 useComponentId() // 無效 internalInstance // 有效 } }
本地使用示例:
當前在本地使用沒有問題,線上環(huán)境會報錯,不建議使用
<script> import {getCurrentInstance} from "vue"; export default { components: { }, setup() { const {ctx} = getCurrentInstance(); console.log(ctx,"屬性1") } </script>
查看打?。?/p>
項目中使用:表單table列表查詢
方法1: 不推薦
setup() { const {ctx} = getCurrentInstance(); console.log(ctx,"屬性1") //表單查詢方法 const submitForm = (formName) =>{ ctx.$refs[formName].validate(valid => { if (valid) { ruleForm.pageNum = 1; getTableData(); } else { console.log("error submit!!"); return false; } }); } }
方法2:推薦此用法,才能在你項目正式上線版本正常運行,避免線上報錯問題
解決:用proxy代替ctx。在結構的時候直接將proxy解構出來
setup() { let {proxy} = getCurrentInstance(); console.log(proxy,"屬性2"); //表單查詢方法 const submitForm = (formName) =>{ proxy.$refs[formName].validate(valid => { if (valid) { ruleForm.pageNum = 1; getTableData(); } else { console.log("error submit!!"); return false; } }); } }
打?。?/p>
到此這篇關于vue3 解決getCurrentInstance 打包后線上環(huán)境報錯問題的文章就介紹到這了,更多相關vue3 getCurrentInstance 打包報錯內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
- vue打包報錯:ERROR in static/js/xxx.js from UglifyJs undefined問題
- 用electron打包vue項目中的報錯問題及解決
- 解決vue打包報錯Unexpected token: punc的問題
- vue打包靜態(tài)資源后顯示空白及static文件路徑報錯的解決
- vue打包npm run build時候界面報錯的解決
- vue 解決uglifyjs-webpack-plugin打包出現(xiàn)報錯的問題
- 解決vue打包后刷新頁面報錯:Unexpected token <
- vue-cli 打包后提交到線上出現(xiàn) "Uncaught SyntaxError:Unexpected token" 報錯
- 打包組件報錯:Error:Cannot?find?module?'vue/compiler-sfc'
相關文章
SpringBoot結合Vue3實現(xiàn)簡單的前后端交互
本文主要介紹了SpringBoot結合Vue3實現(xiàn)簡單的前后端交互,結合實際案例,說明了如何實現(xiàn)前后端數(shù)據(jù)的交互,具有一定的?參考價值,感興趣的可以了解一下2023-08-08安裝@vue/cli 報錯npm WARN deprecated request
這篇文章主要介紹了安裝@vue/cli 報錯npm WARN deprecated request@2.88.2問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-03-03餓了么UI中el-tree樹節(jié)點選中高亮的兩種常用方式(highlight-current屬性)
最近新做的項目有用到Element-UI tree組件,下面這篇文章主要給大家介紹了關于餓了么UI中el-tree樹節(jié)點選中高亮的兩種常用方式(highlight-current屬性),文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-12-12