介绍：第一篇中我们成功导出了，自定义组件的JSON数据，那么接下来我们再Control中把这些数据实现为组件并且去使用它。
1.在widgets新建一个文件夹（名称要统一），文件夹下面有一个.json文件和.vue文件；
2.把schema中生成的json放入此文件；
3.vue文件就是要在移动端显示的组件，接收到.json文件后.vue要显示出来。
因为我是把它内嵌到了我们的管理后台，我们的管理后台和移动端是分开的，对应这里就有两个widgets，管理后台一个，移动端一个；
每次添加新的组件后，移动端那边也要添加（复制过去就行）
注意：这里我们用的mall-cook是未分离的，在mall-cook中因为没有分离所以mall-cook中没有两个widgets文件
接下来，我们来一步一步分析是怎么实现Control
这就是实现diy的页面，最终diy页面会这里被设置出来
Control文件下面的index就是diy的设置页面了
对应
我们先看左侧
这里面的 v-for="(item, index) in
i
n
i
t
i
a
l
i
z
i
n
g
"
，
initializing"，
initializing"，initializing怎么获取的？
左侧拖拽过去，是怎么在中间显示的呢？
我们看中间是什么？这内嵌了一个ifarame！
这里就和schema生成器里面的就不同了，schema里的中间也是draggable，两个draggable同名传递数据。
怎么和内嵌的ifarame通信呢？这里就要用到专门处理 跨域/跨窗口通信 的一个widow的api了【postMessage】
内嵌的iframe会接收数据，这里我们这一篇暂不分析（下图：mall-cook移动端代码）
（所以这里必须要先，启动mall-cook的移动端，然后在管理后台通过接口获取iframe的url）
中间显示出来后，选择组件
管理后台会接收，从iframa发送过来的数据
然后显示右侧对应的内容
右侧对应的组件就是，第一篇schema的center中显示的组件；
这里会，显示接收iframe到json中存在的组件，遍历显示出来
右侧修改数据，中间是怎么同步变化的呢？
schema的center中显示的组件这里是混入，修改组件内容时会通过 this.$emit(‘input’, this.mValue)传给父组件，让父组件同步变化
父组件会通过 v-model="control.curWidget"接收，子组件通过 this.
e
m
i
t
(
′
i
n
p
u
t
′
,
t
h
i
s
.
m
V
a
l
u
e
)
t
h
i
s
.
emit('input', this.mValue) this.
emit(′input′,this.mValue)this.emit(‘change’, this.mValue) 传过来的值。
。。。
因为有依赖注入，中间会同步更新control数据，会被中间的watch监听到，然后会通过跨窗口通信传递给iframe
然后再就是保存数据
通过接口保存数据之后，在移动端调用接口-获取保存数据，然后再显示对应的组件就可以啦～
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
