Vuep v-model完全指南：如何双向同步与实时获取组件代码

Vuep 是一个带实时编辑器与预览的 Vue 组件游乐场（playground）。本文围绕Vuep v-model展开：教你用一行双向绑定，让父组件的代码变量与编辑器内容实时同步，随时拿到用户正在编写的最新组件代码，适合想给文档、教学平台或组件库搭建在线 Demo 的开发者。

为什么需要 Vuep 的 v-model？

传统玩法里，组件代码只能"进去"（通过:template传入），编辑器里改了什么、最终成了什么样，父组件一无所知。而v-model把单向变成双向：

• 下行：父组件的变量变化 → 编辑器内容与预览实时刷新
• 上行：用户在编辑器里敲下每一个字符 → 父组件变量实时更新

这一机制让"实时获取组件代码"成为可能：保存、统计、提交运行、云端同步……都不再需要额外轮询。

快速上手：3 步接入 Vuep v-model

1️⃣ 安装依赖（需要带编译器的完整版 Vue + CodeMirror）：

yarn add vuep codemirror

2️⃣ 注册组件并引入样式：

import Vuep from 'vuep' import 'vuep/dist/vuep.css' Vue.use(Vuep)

3️⃣ 模板里直接v-model：

<vuep v-model="code"></vuep> <button @click="save">保存代码</button>

code就是组件代码字符串（支持<template>/<script>/<style>的 SFC 写法）。官方演示页 test.html 中就是这种最直接的用法。

双向同步机制：value 进，input 出

Vue 的v-model本质是:value+@input的组合，Vuep 完整实现了这一契约：

上行链路（编辑器 → 父组件）用户在 CodeMirror 里编辑，编辑器组件触发change，主组件随后同时做两件事：重新执行代码 + 发射input事件。关键源码在 src/components/playground.js：

change: [this.executeCode, val => this.$emit('input', val)]

下行链路（父组件 → 编辑器）主组件对value做了immediate侦听（playground.js），数据一变就执行代码并渲染预览。而编辑器内部又对value做了"仅在不一致时更新"的保护（src/components/editor.js），避免打字途中被外部覆盖、打断光标。

代码如何被执行？executeCode（playground.js）调用 src/utils/parser.js 拆分出模板、脚本与样式，再经编译器转译，交给 src/components/preview.js 实时挂载渲染——预览区所见即所得。

实战：实时获取最新组件代码

new Vue({ el: '#app', data: () => ({ code: '<template><div>Hello!</div></template>' }), methods: { save () { // 这里永远是用户当前编辑的最新代码 console.log(this.code) } } })

由于每次击键都会触发input，this.code始终与编辑器内容一致——把它提交到后端即可实现"在线代码沙箱 + 持久化"。

进阶用法：v-model 与其他属性配合

• :scope：向代码注入父作用域的组件与变量，让用户代码可以直接使用你的业务组件（用法见 test.html）
• keepData：重新渲染预览时保留数据状态，调试更顺手
• iframe：在隔离 iframe 中渲染预览，避免样式污染
• :options：透传 CodeMirror 配置（主题、行号等），详见 src/components/editor.js

常见问题与避坑指南

Q：为什么改了:template编辑器没更新？template是一次性初始化属性；需要双向同步时请改用v-model（或:value+@input）。

Q：报错时编辑器会怎样？解析或编译出错时，预览区会替换为红色错误提示（vuep-error），代码本身不受影响，修正后自动恢复（逻辑见 playground.js）。

Q：绑定值是什么格式？是字符串（完整的组件代码），不是对象。

Q：页面白屏/报"compiler"相关错误？Vuep 需要完整版（含编译器）的 Vue 构建，webpack 用户需按 README.md 配置vue/dist/vue.common别名。

相关文件参考

掌握v-model后，Vuep 就从"展示组件"升级为"可编程的在线开发环境"——保存、回滚、协作编辑，都只需围绕一个响应式字符串展开。