Vue丨将组件 methods 内的方法绑定到 window 来调用

最新推荐文章于 2023-08-02 13:32:11 发布

原创最新推荐文章于 2023-08-02 13:32:11 发布 · 7.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #Vue

笔录专栏收录该内容

6 篇文章

订阅专栏

在Vue项目中，由于作用域和异步执行的问题，导致组件内的methods方法无法在第三方组件中或外部正确执行。通过将methods中的方法绑定到window对象，确保了在第三方组件完成时能够正确调用，从而解决了执行顺序问题。欢迎分享不同的解决方案进行交流学习。

methods:{
  // 创建电话组件
  createCallComponent(phoneNum) {
    if (window.callComp && !window.callComp.isDestroyed) {
      return;
    };
    window.callComp = new UdeskCallcenterComponent({
       container: document.body,
       token: this.agentToken,
       subDomain: this.subDomain,
       showManualScreenPop: false,
       onHangup: function(conversation) { // 电话挂断时执行
         getCallId(conversation.call_id);  // 这里调用绑定后的方法,并传入callid
         window.callComp.destroy(); // 销毁电话组件
         window.callComp = null; // 销毁电话组件
       }
    });
  },

  // 每次呼叫挂断时获取当前callid，后续把获取值保存到后台接口中
  callIdFun(val) {
    this.call_id = val;
    console.log(this.call_id);
    ...
  },   
}

mounted() {
  // 把vue组件的methods方法绑定到window
  window['getCallId'] = val => {
    this.callIdFun(val)
  }
}

在 vue 项目中调用并创建第三方的组件构建，结果因为涉及到作用域以及组件内属性函数的异步执行问题，导致 vue 的方法在第三方组件内无法执行以及在其外部执行时存在执行顺序的问题(本意是想在第三方组件函数执行完毕后再执行我的函数)，后发现第三方组件内可以执行 window 下的函数方法，最终采用了上述方法解决了此问题！如有不同处理方法，望大家留言互相交流学习。