關(guān)于vue3?解決getCurrentInstance?打包后線上環(huán)境報(bào)錯(cuò)問題
getCurrentInstance
getCurrentInstance
支持訪問內(nèi)部組件實(shí)例。
WARNING
getCurrentInstance
只暴露給高階使用場(chǎng)景,典型的比如在庫中。強(qiáng)烈反對(duì)在應(yīng)用的代碼中使用getCurrentInstance
。請(qǐng)不要把它當(dāng)作在組合式 API 中獲取this
的替代方案來使用。
import { getCurrentInstance } from 'vue' const MyComponent = { setup() { const internalInstance = getCurrentInstance() internalInstance.appContext.config.globalProperties // 訪問 globalProperties } }
打印信息:
getCurrentInstance
只能在setup或生命周期鉤子中調(diào)用。
如需在 setup或生命周期鉤子外使用,請(qǐng)先在
setup
中調(diào)用getCurrentInstance()
獲取該實(shí)例然后再使用。
setup() { const internalInstance = getCurrentInstance() // 有效 const id = useComponentId() // 有效 const handleClick = () => { getCurrentInstance() // 無效 useComponentId() // 無效 internalInstance // 有效 } }
本地使用示例:
當(dāng)前在本地使用沒有問題,線上環(huán)境會(huì)報(bào)錯(cuò),不建議使用
<script> import {getCurrentInstance} from "vue"; export default { components: { }, setup() { const {ctx} = getCurrentInstance(); console.log(ctx,"屬性1") } </script>
查看打?。?/p>
項(xiàng)目中使用:表單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:推薦此用法,才能在你項(xiàng)目正式上線版本正常運(yùn)行,避免線上報(bào)錯(cuò)問題
解決:用proxy代替ctx。在結(jié)構(gòu)的時(shí)候直接將proxy解構(gòu)出來
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>
到此這篇關(guān)于vue3 解決getCurrentInstance 打包后線上環(huán)境報(bào)錯(cuò)問題的文章就介紹到這了,更多相關(guān)vue3 getCurrentInstance 打包報(bào)錯(cuò)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue打包報(bào)錯(cuò):ERROR in static/js/xxx.js from UglifyJs undefined問題
- 用electron打包vue項(xiàng)目中的報(bào)錯(cuò)問題及解決
- 解決vue打包報(bào)錯(cuò)Unexpected token: punc的問題
- vue打包靜態(tài)資源后顯示空白及static文件路徑報(bào)錯(cuò)的解決
- vue打包npm run build時(shí)候界面報(bào)錯(cuò)的解決
- vue 解決uglifyjs-webpack-plugin打包出現(xiàn)報(bào)錯(cuò)的問題
- 解決vue打包后刷新頁面報(bào)錯(cuò):Unexpected token <
- vue-cli 打包后提交到線上出現(xiàn) "Uncaught SyntaxError:Unexpected token" 報(bào)錯(cuò)
- 打包組件報(bào)錯(cuò):Error:Cannot?find?module?'vue/compiler-sfc'
相關(guān)文章
SpringBoot結(jié)合Vue3實(shí)現(xiàn)簡(jiǎn)單的前后端交互
本文主要介紹了SpringBoot結(jié)合Vue3實(shí)現(xiàn)簡(jiǎn)單的前后端交互,結(jié)合實(shí)際案例,說明了如何實(shí)現(xiàn)前后端數(shù)據(jù)的交互,具有一定的?參考價(jià)值,感興趣的可以了解一下2023-08-08vue3中的elementPlus全局組件中文轉(zhuǎn)換方式
這篇文章主要介紹了vue3中的elementPlus全局組件中文轉(zhuǎn)換方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07安裝@vue/cli 報(bào)錯(cuò)npm WARN deprecated request
這篇文章主要介紹了安裝@vue/cli 報(bào)錯(cuò)npm WARN deprecated request@2.88.2問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03Vue表單提交點(diǎn)擊事件只允許點(diǎn)擊一次的實(shí)例
這篇文章主要介紹了Vue表單提交點(diǎn)擊事件只允許點(diǎn)擊一次的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10餓了么UI中el-tree樹節(jié)點(diǎn)選中高亮的兩種常用方式(highlight-current屬性)
最近新做的項(xiàng)目有用到Element-UI tree組件,下面這篇文章主要給大家介紹了關(guān)于餓了么UI中el-tree樹節(jié)點(diǎn)選中高亮的兩種常用方式(highlight-current屬性),文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12Vue3中關(guān)于ref和reactive的區(qū)別分析
這篇文章主要介紹了vue3關(guān)于ref和reactive的區(qū)別分析,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-06-06詳解vue.js移動(dòng)端配置flexible.js及注意事項(xiàng)
最近在用vue做移動(dòng)端項(xiàng)目,網(wǎng)上找了一些移動(dòng)端適配的方案,個(gè)人覺得手淘團(tuán)隊(duì)flexible.js還是比較容易上手,在這里做下總結(jié)。對(duì)vue.js移動(dòng)端配置flexible.js 相關(guān)知識(shí)感興趣的朋友跟隨小編一起看看吧2019-04-04