vue组件向HTML文件传送数据，HTML向vue组件发送数据。vue组件与HTML文件间进行交互的方法。_vue 给html页面传值

最近的项目中，因为使用了云渲染的方式，需要用到原生的html文件，但是项目的前端又是用vue组件来写的。云渲染的api是在html文件里，但是项目的功能是在vue组件里，无法用传统的方式来传递交互数据，后来研究后找到了方法。（原理不清楚，好用就行）。

1，使用本地缓存。localStorage

这是个万能公式，适合数据量不大的传输，但是需要及时清理。数据量不大可以使用，但是因为存取占用资源较多，且需要定时清理，如果数据量大，存取操作不频繁，不建议使用。

2，HTML向vue组件传输

使用window.parent。

window.parent指的是当前窗口的父级窗口对象。在一个iframe或者一个通过window.open()打开的新窗口中，window.parent被用来访问iframe或者新窗口的父级窗口。通过window.parent，可以在父级窗口中操作子级窗口的DOM，也可以在子级窗口中调用父级窗口的函数。例如在一个iframe中，可以使用window.parent.document来访问包含iframe的页面的document对象。需要注意的是，如果当前窗口没有父级窗口，window.parent返回的是当前窗口对象本身。

使用方法：

在HTML文件中：

function dynamicTaskDynamicScene() {
				
					window.parent['setThis'](true，this)
					
				
			}

其中，setThis是给window存的一个实例，可以理解为存的名字，后面小括号里的参数，就是我们需要携带的参数，可以是多个，用逗号隔开。

然后在vue组件中获取参数的方法：

created() {
			window['setThis'] = (bnn,obj) => {
				console.log(bnn,obj)
}

我是在created中获取，也可以在其他生命周期中获取。

3：vue向HTML发送参数。

使用window.frames。

window.frames属性返回与当前窗口相关联的所有框架（frames）的窗口对象的集合。它返回的是类似于数组的对象，包含与当前窗口相关联的所有框架窗口对象，其中第一个窗口对象的索引为0。

与 window.parent 不同，window.frames 返回了所有与当前窗口关联的框架窗口对象，而不仅仅是当前窗口的直接父级窗口对象。通过 window.frames 可以访问以 frame 或 iframe 元素创建的框架，其中每个框架都有一个唯一的名称或者数字索引。

需要注意的是，因为 window.frames 返回的是类似于数组的对象，所以可以像访问数组一样使用它，例如可以使用 window.frames[0] 来访问第一个框架窗口对象。

使用方法：

window.frames['getThis'].XXX(true, this)

在任意方法中使用以上代码.XXX为HTML文件中的方法名，后面是跟的参数，可以为多个参数。

HTML文件那边，只需要写上对应的function XXX 方法名，接收实参就可以了。