codemirror 如何将编辑框中的数据同步到父组件

在Vue.js中，如果你想要将CodeMirror编辑器（Codemirror）内的内容实时同步回父组件，你可以结合使用`v-model`指令以及`@change`或`@input`事件。假设你的子组件名为`CodeEditor.vue`，以下是基本步骤：

1. 首先，在子组件`CodeEditor.vue`的模板中绑定`v-model`到一个内部变量，例如`codeContent`：

<template>
  <codemirror ref="editor" :value="codeContent" @change="handleChange" />
</template>

2. 定义`handleChange`方法来响应 Codemirror 的更改事件，将新内容传递给父组件：

<script>
export default {
  data() {
    return {
      codeContent: '', // 初始化内容为空
    };
  },
  methods: {
    handleChange(newContent) {
      this.$emit('content-changed', newContent); // 触发自定义事件
    }
  }
};
</script>

3. 在父组件的模板中，使用`v-model`监听子组件发送的`content-changed`事件，并将其绑定到父组件的数据上：

<template>
  <CodeEditor :content-changed="handleContentChange" />
</template>

4. 父组件中定义`handleContentChange`方法来处理子组件的内容变化：

<script>
export default {
  methods: {
    handleContentChange(newContent) {
      this.codemirrorData = newContent; // 将新内容存储在父组件的数据中
    }
  }
};
</script>

现在，每当CodeMirror中的内容发生变化，父组件都会收到`content-changed`事件，并更新`codemirrorData`属性。