this.$refs.proup is not a function

最新推荐文章于 2024-12-02 20:31:55 发布

推开世界的门

最新推荐文章于 2024-12-02 20:31:55 发布

阅读量1.2w

点赞数 22

CC 4.0 BY-SA版权

分类专栏：公司项目相关 vue 文章标签：小程序

本文链接：https://blog.csdn.net/qq_38845858/article/details/106517256

公司项目相关同时被 2 个专栏收录

84 篇文章

订阅专栏

vue

67 篇文章

订阅专栏

本文详细解析了Vue开发中常见的this指向错误与$refs操作问题，包括多层嵌套引起的this指向变化、$refs引用数组的处理方法，以及在循环列表中精确控制弹框显示与关闭的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

报错可能场景

1：this指向问题(多层嵌套，导致this已经不是从前那个this)
2：$refs可能指的是数组(如果是数组，proup需要索引才能取到)

场景一举例及处理

点击领劵抢购，需要弹框，并且复制淘口令，复制淘口令两秒后，关闭弹框

copy(index, value) {
      var that = this;
      uni.setClipboardData({
        data: value, // 要复制的文字
        success: function(res) {
          console.log(res);
          uni.getClipboardData({
            success: res => {
              uni.showToast({
                title: "复制成功"
              });
              setTimeout(() => {
                that.$refs.popupRush[index].close({});
              }, 2000);
            }
          });
        }
      });
    },

处理：

在setTimeout里面再次调用$refs已经取不到当初的this，所以在copy(复制)的时候，第一步先将this重新赋值成that(切记是一进来就重新赋值this)

场景二举例及处理

一般页面，一个弹框就足够了，但是如果是循环列表。每一项都需要在弹框里面填充内容，所以就需要将弹框和循环列表写在一起，那么问题来了。这就导致加载多少数据，你就有多少个$refs，所以需要说明打开弹框或者关闭弹框具体是哪个列表项

 taobao(index) {
      this.$refs.popupRush[index].open({});
    },

处理：
在弹框里面填充内容，这肯定后端返回的数据。再加上是循环列表，所以你能保存一个index。
v-for="(item, index) in rushShop" :key="index"
当你点击弹框的时候，，直接把这个index传入，当做弹框的索引就好

场景三补充

由于每一个循环项都要绑一个弹框，当点击非弹框区域的时候，就又会调用弹框的方法(闪退又出现,方便理解),
在这里插入图片描述

这是什么原因呢，这个时候，你去看控制台。
1.点击非弹框区域，弹框确实消失了
2.点击非弹框区域，弹框确实消失了(弹框自带的)，但是又重新调了弹框的方法，为什么会重新调用弹框方法呢？你去审查元素就会知道。弹框出现，非弹框区域其实就是第一次点击的那个区域。所以会再次调用弹框方法

解决方法
设置一个变量，来控制是否弹框。在弹框打开的时候，改变变量的值。再利用变量做判断，再次改变变量的值，并且return(这样就终止了后面再次调用弹框)

taobao(index) {
      if (this.isOpen) {
        this.isOpen = false;
        return;
      }
      this.$refs.popupRush[index].open({});
      this.isOpen = true;
    },

反思

解铃还须系铃人。既然你用组件的弹框，那么你总得知道$refs里面有什么吧，不能直接 $refs.proup或者 $refs.xxx。万一人家是个数组呢

2.点击非弹框区域,关闭弹框，并再次调用弹框的方法(这是个bug)。既然点击非弹框区域，我知道他一定会再次调用弹框方法，那就在他再次调用弹框方法的时候，做一个判断，如果已经弹框。那我直接return 阻断后面代码的执行。这个时候，就没有什么是一个变量解决不了的

taobao(index) {
      if (this.isOpen) {
        this.isOpen = false;
        return;
      }
      this.$refs.popupRush[index].open({});
      this.isOpen = true;
    },