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

Question

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

data() {
 editorEx: {}
}

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

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

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

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

Answer 1

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

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

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

希望这个解释对您有所帮助。

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

Create a instance of Monaco Editor in Vue.js component

javascript

vue.js

monaco-editor