vue使用引用库中的方法

monaco-editor-vue的官方源码如下

Index.js

import*as monacofrom'monaco-editor/esm/vs/editor/editor.api';functionnoop(){}export{ monaco};exportdefault{
  name:'MonacoEditor',
  props:{
    diffEditor:{ type: Boolean,default:false},//是否使用diff模式
    width:{type:[String, Number],default:'100%'},
    height:{type:[String, Number],default:'100%'},
    original: String,//只有在diff模式下有效
    value: String,
    language:{type: String,default:'javascript'},
    theme:{type: String,default:'vs'},
    options:{type: Object,default(){return{};}},
    editorMounted:{type: Function,default: noop},
    editorBeforeMount:{type: Function,default: noop}},

  watch:{
    options:{
      deep:true,handler(options){this.editor&&this.editor.updateOptions(options);}},value(){this.editor&&this.value!==this._getValue()&&this._setValue(this.value);},language(){if(!this.editor)return;if(this.diffEditor){//diff模式下更新languageconst{ original, modified}=this.editor.getModel();
        monaco.editor.setModelLanguage(original,this.language);
        monaco.editor.setModelLanguage(modified,this.language);}else
        monaco.editor.setModelLanguage(this.editor.getModel(),this.language);},theme(){this.editor&& monaco.editor.setTheme(this.theme);},style(){this.editor&&this.$nextTick(()=>{this.editor.layout();});}},

  computed:{style(){return{
        width:!/^\d+$/.test(this.width)?this.width:`${this.width}px`,
        height:!/^\d+$/.test(this.height)?this.height:`${this.height}px`}}},mounted(){this.initMonaco();},beforeDestroy(){this.editor&&this.editor.dispose();},render(h){return(<divclass="monaco_editor_container" style={this.style}></div>);},

  methods:{initMonaco(){const{ value, language, theme, options}=this;
      Object.assign(options,this._editorBeforeMount());//编辑器初始化前this.editor= monaco.editor[this.diffEditor?'createDiffEditor':'create'](this.$el,{
        value: value,
        language: language,
        theme: theme,...options});this.diffEditor&&this._setModel(this.value,this.original);this._editorMounted(this.editor);//编辑器初始化后},_getEditor(){if(!this.editor)returnnull;returnthis.diffEditor?this.editor.modifiedEditor:this.editor;},_setModel(value, original){//diff模式下设置modelconst{ language}=this;const originalModel= monaco.editor.createModel(original, language);const modifiedModel= monaco.editor.createModel(value, language);this.editor.setModel({
        original: originalModel,
        modified: modifiedModel});},_setValue(value){let editor=this._getEditor();if(editor)return editor.setValue(value);},_getValue(){let editor=this._getEditor();if(!editor)return'';return editor.getValue();},_editorBeforeMount(){const options=this.editorBeforeMount(monaco);return options||{};},_editorMounted(editor){this.editorMounted(editor, monaco);if(this.diffEditor){
        editor.onDidUpdateDiff((event)=>{const value=this._getValue();this._emitChange(value, event);});}else{
        editor.onDidChangeModelContent(event=>{const value=this._getValue();this._emitChange(value, event);});}},_emitChange(value, event){this.$emit('change', value, event);this.$emit('input', value);}}}

使用了vue想使用如上库中的_getValue方法怎么调呢？

定义ref=“”，使用this.$refs.exampleEditor._setValue('')

参考如下代码

test.vue

<template>
  <div>
    <MonacoEditor ref="exampleEditor" width="100%" height="300" theme="vs-dark" language="javascript" :options="options" @change="codeInput" />
  </div>
</template>
<script>
import MonacoEditor from 'monaco-editor-vue'
export default {
  components: {
    MonacoEditor
  },
  data() {
    return {
    }
  },
  beforeCreate() {
  },

  mounted() {
  },
  methods: {
    this.$refs.exampleEditor._setValue('')
  }
}