如何从事件监听回调函数访问 vue3 方法答案

【问题标题】：How to access vue3 methods from event listener callback function如何从事件监听回调函数访问 vue3 方法
【发布时间】：2021-06-07 05:38:15
【问题描述】：

说明

在组件的mounted() 部分，我添加了一个事件侦听器，它应该调用其中一种方法。

代码

export default {
  methods: {
    changeState: function(el) {console.log(el);}
  },
  mounted() {
    document.addEventListener('DOMContentLoaded', function() {
     
      //I'm using materialize.css carousel here
      //---------------------------------------
      var elems = document.querySelectorAll('.carousel');
      M.Carousel.init(elems, {
        onCycleTo: function(el) {
          this.changeState(1);
         }
      });
    });
  }
}

问题

我认为有两个问题：

onCycleTo 中的 this 指的是 onCycleTo 中的函数，而不是方法部分
eventListener 被添加到文档中，该文档位于不同的范围内，因此 this.changeState(1) 引用了一个全局函数（不存在）

可能的解决方案

我认为有可能以某种方式从全局范围解决方法，但我不知道如何。也欢迎任何其他解决方案。

我该如何解决这些问题？

【问题讨论】：

标签： javascript vue.js materialize vuejs3

【解决方案1】：

将this 分配给名为vm 的全局变量，然后用于访问该方法：

 var vm=this;
  var elems = document.querySelectorAll('.carousel');
      M.Carousel.init(elems, {
        onCycleTo: function(el) {
          vm.changeState(1);
         }
      });
    });

你也可以试试箭头功能：

  var elems = document.querySelectorAll('.carousel');
      M.Carousel.init(elems, {
        onCycleTo: (el)=> {
          this.changeState(1);
         }
      });
    });

【讨论】：