Vue CodeMirror：创建 Groovey 代码输入组件

首先，我们需要在项目中安装 vue-codemirror 和 codemirror：

npm install vue-codemirror codemirror --save

然后，我们可以创建一个叫做 GrooveyInput.vue 的组件，代码如下：

<template>
  <div>
    <codemirror :options='options' @input='updateCode' v-model='code'></codemirror>
  </div>
</template>

<script>
  import 'codemirror/mode/groovy/groovy';

  export default {
    name: 'GrooveyInput',
    data() {
      return {
        code: '',
        options: {
          mode: 'groovy',
          theme: 'default',
          lineNumbers: true
        }
      }
    },
    methods: {
      updateCode(newCode) {
        this.code = newCode;
        this.$emit('input', newCode);
      }
    }
  }
</script>

<style>
  .CodeMirror {
    height: 300px;
  }
</style>

这个组件中，我们首先引入了 groovy 的语法模式。然后，在 data 中初始化了 code 和 options 属性。code 存储用户输入的 Groovy 代码，options 包含了 Codemirror 的配置。

在模板中，我们使用了 codemirror 组件，并将 options 传递给它。我们还监听了 input 事件，当用户输入内容时，我们将新的代码赋值给 code，并通过 $emit 发送出去。

最后，我们在样式中设置了 Codemirror 的高度为 300px。

现在，我们可以在其他组件中使用 GrooveyInput 组件，例如：

<template>
  <div>
    <groovey-input v-model='code'></groovey-input>
    <button @click='runCode'>运行代码</button>
  </div>
</template>

<script>
  import GrooveyInput from './GrooveyInput.vue';

  export default {
    name: 'MyComponent',
    components: {
      GrooveyInput
    },
    data() {
      return {
        code: ''
      }
    },
    methods: {
      runCode() {
        // 运行 Groovy 代码
      }
    }
  }
</script>

这个组件中，我们使用了 GrooveyInput 组件，并将 code 双向绑定到它。我们还添加了一个 button，点击它可以运行 Groovy 代码。在 runCode 方法中，我们可以通过调用 Groovy 的解释器来运行用户输入的代码。