Javascript 从组件内部创建的FullCalendar对象中访问Vue组件对象

我正在使用VueJS的完整日历，我希望在每次单击日历上的某个时间时打开一个自定义模式。但是，我需要在Full calendar对象之外调用一个单独的函数来打开我的模式，我不确定如何解决这个问题，因为在Full calendar中使用

this

将引用该对象和Vue组件对象。我需要某种方法来获取Vue组件对象，以下是我迄今为止尝试但没有成功的方法

export default {
    name: 'MyComponent',
    methods: {
        myFunc () {
            // should get called from inside fullCalendar below
            this.$store.dispatch()  // this.$store works here since `this` refers to Vue component 
        }
    },
    mounted () {

        $('#calendar').fullCalendar({
        header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay,listWeek'
        },
        navLinks: true,
        eventLimit: true,
        defaultView: 'agendaWeek',
        editable: true,
        selectable: true,
        selectHelper: true,
        select: function (start, end) {
            console.log(this)   // refers to Full Calendar object
            console.log(this.$parent)   // getting null, need to call function in vue component
            console.log(this.myFunc()) // cannot do this since this will try to call a function in Full Calendar library
            console.log(this.$parent.$store) // getting null, need to get store that I defined 
        }
    }
}

---

这是新用户经常遇到的javascript范围问题

正如您所发现的，这是一个流动的概念

有两种方法。第一种是使用箭头函数。箭头函数将此

绑定到创建它们的上下文：

select:  (start, end) => {
        console.log(this)   // should be your vue instance 
    }

另一种方法是在

挂载的
函数顶部存储对该
的引用。此变量通常命名为
self

var self = this;

....

select: function (start, end) {
        console.log(self) // also your vue instance
    }

这样，即使
This
反弹到回调中的另一个对象，您仍然可以通过
self
变量到达原始对象上下文

这种技术在很大程度上已经被箭头函数所淘汰，但仍然可以用于支持较旧的浏览器，这是一个很好的了解