vue自定义组件是.vue还是html,form-generator 添加自定义的.vue 组件（二）

让预览界面也能显示自定义的组件

前面已经实现了自定义.vue组件的添加，再编辑界面上也能正常使用。单当进行预览的时候却发现无法显示，这是因为预览的preview 页面是通过iframe 嵌套的另一个页面，与本编辑器不在同一个vue 应用中，所以这里需要重新注册组件。

生成preview 页面的代码主要在generator目录 下。

ml.png

让自定义组件可在preview 上运行需要一下3步：

1.在preview 的main.js 中全局注册自定义组件

// preview/main.js

import Vue from 'vue'

import { loadScriptQueue } from '@/utils/loadScript'

import Tinymce from '@/components/tinymce/index.vue'

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

import htitle from '../../components/render/aritical/htitle.vue' //引入自己的自定义组件

import mediaImg from '../../components/render/aritical/media_img.vue'