Vue3使用getCurrentInstance()获取refs节点在生产环境和开发环境的区别

最新推荐文章于 2024-04-05 10:18:09 发布
最新推荐文章于 2024-04-05 10:18:09 发布
阅读量715 收藏 1
点赞数 1
文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33522195/article/details/133221148
版权

起因：在vue3项目中的setup语法糖内，在使用getCurrentInstance()获取ref节点，并通过该节点获取audio标签并播放音频（refs.ctx.$refs.audio.play()），在开发环境正常，但生产环境报错（显示获取不到audio标签）

原因：在开发环境中，获取的refs对象中的ctx节点并没有对应的$refs属性

解决方法：不能使用ctx节点，而是使用refs下的refs节点（refs.refs.audio.play()），问题解决

1、生产环境下ctx属性中没有$refs

生产环境下ctx属性中没有$refs属性

刃星辰
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue3使用$refs获取节点生产环境undefined-使用getCurrentInstance-ctx应改用proxy
JackieDYH的博客
07-03 842
Vue3使用$refs获取节点生产环境undefined-使用getCurrentInstance-ctx应改用proxy
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
10-17
主要介绍了vue-cli3.0如何使用CDN区分开发、生产、预发布环境，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue3项目中使用getCurrentInstance获取实例和dom的问题
qq_36877078的博客
04-02 570
我们可以通过 getCurrentInstance这个函数来返回当前组件的实例对象,也就是当前vue这个实例对象Vue2中，可以通过this来获取当前组件实例；Vue3中，在setup中无法通过this获取组件实例，console.log(this)打印出来的值是undefined。在Vue3中，getCurrentInstance()可以用来获取当前组件实例。
关于Vue3获取当前组件实例的 getCurrentInstance 方法的补充
最新发布
2401_83739821的博客
04-05 131
Vue3：Vue2：Vue3：Vue2：
vue3---getCurrentInstance
热门推荐
qq_46199553的博客
11-16 1万+
方式一、通过 getCurrentInstance 方法获取当前组件实例，从而获取 route 和 router。方式二：通过从路由中导入 useRoute useRouter 使用 route 和 router。3.setup内部从vue中按需导出 getCurrentInstance 方法。5.通过proxy.$refs.子组件ref名.子组件内属性/方法 实现调用。4.调用getCurrentInstance方法导出proxy。1.setup语法糖中导入子组件。2.在子组件标签上绑定ref值。
Vue3中getCurrentInstance()方法
weixin_51396911的博客
02-01 3233
是 Vue.js 3 Composition API 中的一个函数，它的作用是获取当前组件的实例对象。监听组件生命周期钩子：获取到组件的实例对象后，您可以通过实例对象上的生命周期钩子函数来监听组件的生命周期事件，如。，您可以在组件中像访问普通对象一样访问和修改响应式属性，而无需手动追踪属性的变化。对象是一个代理对象，它会将数据访问和修改的操作转发给真实的响应式数据。，可以获取到组件的实例对象，从而可以访问和调用组件实例上定义的方法。，可以直接访问和修改组件的响应式数据，而不需要手动使用。
vue3 ref获取节点生产环境undefined
weixin_43110440的博客
11-11 808
vue3生产环境获取节点失败
Vue3组合式API：getCurrentInstance
Zaralike的博客
07-19 1万+
vue3 getCurrentInstance API
vue3的getCurrentInstance获取组件实例踩坑记录
jieyucx的博客
10-25 9279
我们可以通过 getCurrentInstance这个函数来返回当前组件的实例对象,也就是当前vue这个实例对象；。在Vue3中，可以用来获取当前组件实例访问组件实例的属性：可以通过或来获取当前组件实例的属性。例如，可以使用访问组件的 props 属性。调用组件实例的方法：可以通过或来调用当前组件实例的方法。例如，可以使用来触发组件的自定义事件。在生命周期钩子中使用：可以在组件的生命周期钩子中使用来获取当前组件实例，以便在钩子函数中访问组件实例的属性或调用组件实例的方法。
详解vue+axios给开发环境和生产环境配置不同的接口地址
12-02
在开发过程中，前端请求访问的是自己本机启动的后台服务，此时涉及到跨域（因为端口不一样），所以在config/index.js文件中配置了代理 //检查某个文件是否存在 try { fs.statSync(path.join(__dirname, '../proxy/...
在Vue中使用ref获取dom元素节点及组件内的数据和方法
01-20
用Vue实例中的自带的$refs属性获取元素 用预先定义好的引用名来获取 即在页面中的ref属性定义的值 var vm=new Vue({ el:'#app', data:{}, methods:{ getElement() { console.log(this.$refs.myti
vue 父组件通过$refs获取子组件的值和方法详解
10-16
今天小编就为大家分享一篇vue 父组件通过$refs获取子组件的值和方法详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue3还用this吗？getCurrentInstance获取当前组件实例
头条:俊哥前端工程师，真正的大师永远怀揣着一颗学徒的心。
11-24 3105
在Vue3中，我们发现this是undefined，那我们真的没法使用this了吗？vu3给我们提供了一个getCurrentInstance函数： 用于获取当前组件实例。身上有个ctx属性有点类似this,通过代码可以看到如何使用。
vue3.0获取$refs
susanliy的博客
12-24 7181
<login-pop ref="login"></login-pop> setup() { const login = ref() const openDialog = () => { login.value?.openDialog() } return { openDialog, login }//**记得把所需要的方法和属性值都要return** },
vue3获取当前组件实例的 getCurrentInstance 方法
一个超爱喝可乐的web前端攻城狮
10-26 6475
vue3获取当前组件实例的 getCurrentInstance 方法 Vue3获取当前组件实例的 getCurrentInstance 方法上 ctx 生产获取不到 上面的全局方法 其实这个 ctx 就是为了便于在开发模式下通过控制台检查的，生产环境，无法获取全局上挂载的方法。不要依赖 ctx 方法去获取组件实例来完成一些主要功能，否则在项目打包后会报错。解决办法是用proxy代替ctx. 代码如下 vue组件中调用全局方法 import { getCurrentInstance } from "vu
Vue3中的公共数据配置globalProperties getCurrentInstance、网络代理配置
看见小狮子没
09-21 1万+
1、
【Vue3】在setup使用$refs(元素引用）
为了皮肤，争取早日到Lv4。
03-22 671
setup中没有了this了，如何使用$refs？
uni-app使用vue3，在元素或组件实例上添加ref，用this.$refs显示undefined
chenlim87的博客
09-23 3378
项目中引用了一个UI组件库，在表单上添加了`ref`属性，方便提交时验证。触发提交方法时显示不存在这个方法或this.$refs为undefined。然后用`ctx.$refs`代替`this.$refs`。这里的`ctx`相当于全局this。
Vue3组合式API之getCurrentInstance详解（在行为验证码之滑动验证AJ-Captcha遇到在开发环境可以，测试环境报错）
m0_52263688的博客
11-01 1575
ctx和proxy都是getCurrentInstance()对象中的属性，通过解构赋值的方式拿到。但是在Vue3中，在setup中无法通过this获取组件实例的。所以在Vue3中，我们可以通过getCurrentInstance()来获取当前组件实例。首先大家知道我们可以通过 getCurrentInstance这个函数来获取当前组件的实例对象,也就是当前vue这个实例对象。由于本人在使用AJ-Captcha插件的过程中发现在开发环境调试正常，但是测试环境会报错，获取不到组件实例。开发中只适用于调试！
vue3通过refs获取dom节点
05-18
在Vue3中，我们可以通过`ref`指令来获取DOM节点。下面是一个简单的示例： ```html <button @click="focusInput">Focus Input import { ref } from 'vue'; export default { setup() { const myInput ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值