getCurrentInstance

getCurrentInstance?支持訪問內(nèi)部組件實例。

WARNING

getCurrentInstance?只暴露給高階使用場景，典型的比如在庫中。強烈反對在應(yīng)用的代碼中使用?getCurrentInstance。請不要把它當作在組合式 API 中獲取?this?的替代方案來使用。

import { getCurrentInstance } from 'vue'const MyComponent = {setup() {const internalInstance = getCurrentInstance()internalInstance.appContext.config.globalProperties // 訪問 globalProperties} }

打印信息：?

getCurrentInstance?只能在setup或生命周期鉤子中調(diào)用。?

如需在?setup或生命周期鉤子外使用，請先在?setup?中調(diào)用?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>

查看打印：

項目中使用：表單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。在結(jié)構(gòu)的時候直接將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;}});} }

打印：

總結(jié)

以上是生活随笔為你收集整理的vue3 解决getCurrentInstance 打包后线上环境报错问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。