关于vue3 解决getCurrentInstance 打包后线上环境报错问题

 更新时间:2022年05月24日 14:55:42   作者:船长在船上  
这篇文章主要介绍了vue3 解决getCurrentInstance 打包后线上环境报错问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

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 // 有效
    }
}

本地使用示例:

当前在本地使用没有问题,线上环境会报错,不建议使用

<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。在结构的时候直接将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;
            }
          });
        }
}

打印:

到此这篇关于vue3 解决getCurrentInstance 打包后线上环境报错问题的文章就介绍到这了,更多相关vue3 getCurrentInstance 打包报错内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue3+vite+ts使用require.context问题

    vue3+vite+ts使用require.context问题

    这篇文章主要介绍了vue3+vite+ts使用require.context问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • VUE2.0自定义指令与v-if冲突导致元素属性修改错位问题及解决方法

    VUE2.0自定义指令与v-if冲突导致元素属性修改错位问题及解决方法

    这篇文章主要介绍了VUE2.0自定义指令与v-if冲突导致元素属性修改错位问题及解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-07-07
  • Vue切换Tab动态渲染组件的操作

    Vue切换Tab动态渲染组件的操作

    这篇文章主要介绍了Vue切换Tab动态渲染组件的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • vue+ts实现元素鼠标拖动效果

    vue+ts实现元素鼠标拖动效果

    这篇文章主要为大家详细介绍了vue+ts实现元素鼠标拖动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • vue项目刷新当前页面的三种方法

    vue项目刷新当前页面的三种方法

    这篇文章主要介绍了vue项目刷新当前页面的三种方法,本文图文并茂给大家介绍的非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-12-12
  • vue2使用wangeditor实现数学公式和富文本编辑器

    vue2使用wangeditor实现数学公式和富文本编辑器

    这篇文章主要为大家详细介绍了vue2如何使用wangeditor实现数学公式和富文本编辑器功能,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一下
    2023-12-12
  • vue如何使用vant组件的field组件disabled修改默认样式

    vue如何使用vant组件的field组件disabled修改默认样式

    这篇文章主要介绍了vue如何使用vant组件的field组件disabled修改默认样式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • uniapp中使用lottie实现JSON动画的操作步骤

    uniapp中使用lottie实现JSON动画的操作步骤

    这篇文章主要介绍了如何在项目中使用JSON动画组件,包括创建目录结构、下载JSON文件、编写自定义组件代码以及组件的使用方法,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-01-01
  • vue3使用videojs播放m3u8格式视频教程

    vue3使用videojs播放m3u8格式视频教程

    m3u8是一种基于HTTP Live Streaming(HLS)文件视频格式,它主要是存放整个视频的基本信息和分片(Segment)组成,下面这篇文章主要给大家介绍了关于vue3使用videojs播放m3u8格式视频的相关资料,需要的朋友可以参考下
    2023-06-06
  • vue或react项目生产环境去掉console.log的操作

    vue或react项目生产环境去掉console.log的操作

    这篇文章主要介绍了vue或react项目生产环境去掉console.log的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09

最新评论