将vue使用iframe嵌套至html中使用(页面交互传值)

原因: 同源安全策略

你不能用javascript访问一个<iframe>，如果你能做到这一点，那将是一个巨大的安全缺陷。对于同一源策略浏览器，阻止脚本尝试访问具有不同源的帧。

参见: https://www.jianshu.com/p/daaaaef7fe8f

----这是一条分割线----

不推荐使用,可能会产生安全隐患,如果使用,请详细阅读文档:

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage

vue是属于MVVM模式的框架，数据交互其实很简单的，它是通过在data里面设置参数变量，然后在方法里面通过this来点这个变量，把需要交互的数据通过这样的方式渲染到页面上去。

例如你在页面上写了 <div>{{message}}</div>那么你就可以在data里面设置一个 message参数变量，如下：

export default {

data () {

return {

message: '默认显示内容'

}

}

}

然后在方法里面通过 this.message = ‘新的内容’

这样的方式来修改。vue还有生命周期，根据实际情况在不同的周期写方法来实现想要的功能就可以了。

以下针对的是你要用vue+webpack开发前后端分离单页面项目（spa）来回答，vue也可以用在传统MVC的视图层，这种开发模式不在回答范畴

开发spa的话，视图路由切换(router)逻辑都在前端，前后端分离，基本是一个html完成所有页面，不再（很少）需要后端渲染视图了

这是前端框架开发问题，跟后台没什么关系

只有开发依赖nodejs，打包后就是可以直接运行的普通html+js文件，上线并不需要专门的环境

可以跟后台项目放一起，只要能打开包后的index.html 放哪里都行

AJAX，数据交互完全通过AJAX，视图逻辑都在前端处理，哪个页面需要的哪个数据通过AJAX请求让后台指定接口提供，不会存在后台不知道提供给哪个页面，前台不知道怎么接受数据的问题。

---