# 文章编辑与预览

编辑与预览共用同一个 `Article` 对象，用标签在两种视图之间切换。

## 组合演示

:::preview 编辑与预览联动 || 切换正文类型时两个标签页同时切换渲染分支

demo-preview=../demos/scenarios/article.vue

:::

## 这个场景覆盖了什么

- **正文类型切换**：纯文本、Markdown、富文本三种形态共用一份数据
- **数据联动**：`ArticleEditor` 抛出的更新直接喂给 `ArticleView`
- **字段保留**：`title` 等业务字段由外层维护，编辑器不会丢字段
- **提交语义**：`submit()` 等待未完成的媒体上传后再返回最终数据

## 为什么用标签而不是分栏

PC 端可以左右并排，移动端宽度不够。用标签切换既保证了对比的便利，又不牺牲编辑区的可用宽度。

## 相关组件

- [ArticleEditor](/components/article-editor)
- [ArticleView](/components/article-view)