this.$refs.proup is not a function

報錯可能場景

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;
    },

反思

1. 解鈴還須繫鈴人。既然你用組件的彈框，那麼你總得知道$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;
    },

3. 可能我們會遇到很多問題，網上的答案也也有很多種。你可能會都試一試，你會發現，試着試着，自己就煩l。不防靜下心，想想解鈴換需繫鈴人，問題出在哪，就在那解決，多輸出，多審查元素。有時候，問題或許沒那麼難解決呢
   下面是成功的演示圖