之前公司的老项目是mvc模式，前后端不分离，页面的很多内容都是用的jq+layui的形式，说实话，不好处理。特别是我不是很熟练jq的情况下。

前几天写了一个表格及页面的增删改查，由于编辑页面需要展示的内容过于庞大（需要从天眼查的接口上获取很多的数据），因此不得以重构成vue的页面，企图通过vue的组件来简化页面结构。

想法是好的，但是基础忘了，通过cdn引入的vue.js，是没有办法使用vue的组件功能的，因为浏览器不识别，只有通过vue脚手架搭建的项目，才可以使用vue的组件功能，我很惭愧，我的基础好烂……

话不多说，直接上代码：

由于我们公司有自己的主题色，所以在引入了elementUi的cdn链接之后，我又下载到本地，更改主题色之后，覆盖之前的样式。

为什么要这样做？

我有一个本地的json文件，想要获取其中的一部分数据，但是通过import的方式是没有办法获取的， scriipt标签默认的格式是：text/script 如果想要使用Import的形式，需要将type改为;module ，但是我这边还是不起作用,会提示报错:文件Not found，最后是通过下面的方法解决的……

通过$.get调取Json文件，然后将获取到的数据赋值到vue中。

需要注意的一点就是这个el，一定要写，之前在用脚手架搭建的vue项目中，这个el是可以没有的，因此这个地方也坑了我一把，el一定要写，还要是唯一的才可以。

前面已经说了，cdn引入的vue是不能使用组件功能的，但是为了页面简洁和结构清晰，还是需要用到这个组件，因此我借用了Iframe标签，

element-ui中的弹层组件dialog，我还是有用到的，但是里面换成了iframe标签，这个地方需要用到iframe的传值问题

增删改查功能：其中的改需要弹层展示详情，这就需要将id传递到详情页面，调取接口获取详情数据。

传参的方式如下：

我是借用了一个span标签，由于整个页面背景是白色#fff，因此我将span的样式也改为白色，防止页面出现不必要的数据展示。

span上有个自定义的id :data-id="id" 当弹层需要弹出时，给id赋值为当前这条数据的id，传递到子页面中，

通过jq的方式获取到想要的元素，然后通过jq元素.data(‘id’)的形式获取到id， 子级页面获取父级页面的dom元素可以通过window.parent.document的形式获取，这个是获取父级整个dom元素，然后通过“#currentId”缩小范围既可以得到想要的元素了，同理，获取state也是如此

由于我是使用的父级页面的dialog弹层，然后加载iframe标签来实现的类似于组件的功能，在子级页面修改完内容后，需要关闭这个弹层，应该怎么处理那？

此时就需要子级调用父级的函数了：

父级页面的改动：

在mounted生命周期函数中，将vue中的函数挂载到window上，

然后在子页面处理：通过parent.xxx()的方式进行函数的调用