this.$refs.proup is not a function

- 日理万妓 2021-08-29 17:10 623阅读 0赞

### 报错可能场景 ###

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传入，当做弹框的索引就好

###### 场景三补充 ######

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

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

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

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

### 反思 ###

1.  解铃还须系铃人。既然你用组件的弹框，那么你总得知道$refs里面有什么吧，不能直接 $refs.proup或者 $refs.xxx。万一人家是个数组呢  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70]  
    2.点击非弹框区域,关闭弹框，并再次调用弹框的方法(这是个bug)。既然点击非弹框区域，我知道他一定会再次调用弹框方法，那就在他再次调用弹框方法的时候，做一个判断，如果已经弹框。那我直接return 阻断后面代码的执行。这个时候，就没有什么是一个变量解决不了的

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

1.  可能我们会遇到很多问题，网上的答案也也有很多种。你可能会都试一试，你会发现，试着试着，自己就烦l。不防静下心，想想解铃换需系铃人，问题出在哪，就在那解决，多输出，多审查元素。有时候，问题或许没那么难解决呢  
    下面是成功的演示图  
    ![在这里插入图片描述][20200603103435139.gif_pic_center]

[20200603095855879.gif_pic_center]: /images/20210813/30b1886d795c45aba8d8cfdfe91b878e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70]: /images/20210813/68b23a9f78f44910af81a45c438db725.png
[20200603103435139.gif_pic_center]: /images/20210813/bd277b7684e2461686ad29325cc2d87e.png