在 Vue.js 组件中创建 Monaco Editor 的实例答案

【问题标题】：Create a instance of Monaco Editor in Vue.js component在 Vue.js 组件中创建 Monaco Editor 的实例
【发布时间】：2020-05-15 08:29:55
【问题描述】：

我正在使用 Vue.js 开发 Monaco Editor，但我无法理解 Monaco 是如何实例化到 vue 组件中的： 1）我在 data() 中放入了一个 editorEx 对象以用于此目的，就像这样

data() {
 editorEx: {}
}

2) 我写了一个调用构造函数的 initMonaco 函数（在 vue 组件挂载时调用） 'monaco.editor.create(...)' 这样的

initMonaco() {
    this.editor = monaco.editor.create(...)
}

问题： 'this.editor' 变量在哪里？

我从来没有写过那个变量（在组件中，在 vuex 中），但它工作得很好。

【问题讨论】：

标签： javascript vue.js monaco-editor

【解决方案1】：

Javascript 不会寻找之前定义的属性来设置值。它找到对象并设置值。如果没有这样的属性，它会创建。

另一方面，如何定义“this”含义的函数也很重要。我举一个 Vue 组件数据对象的例子：

data() {
    return {
        first_object: {
            action() {
                // "this" refers to first_object
            }
        },
        second_object: {
            action: () => {
                // "this" refers to Vue instance
            }
        },
    };
}

我希望这个解释会有所帮助。

【讨论】：