【技术实现步骤摘要】
本专利技术涉及计算机，具体提供一种在跨域页面间同步vue.js组件数据的方法。
技术介绍
1、vue.js是一种流行的javascript框架，用于构建交互式的web应用程序。vue.js具有响应式数据绑定、虚拟dom、组件化开发、指令等特性，使得开发者可以更加高效地构建复杂的web应用程序。vue.js作为一种组件化的框架，可以将整个应用程序细分为多个小组件，并使用这些组件构建应用程序的不同部分，每个组件负责管理自己的状态和模板，并可以复用在不同的页面中。
2、组件之间可以通过props参数来传递数据。在父组件中，可以通过v-bind或者简写的冒号语法将数据传递给子组件，子组件可以在自己的props对象中定义接收这些数据的属性。如果需要数据双向传递，如图1所示，可以使用v-model指令，在父组件中，通过v-model将数据绑定到子组件上，实现自动监听子组件触发的更新事件，实现数据的双向更新，在子组件中，通过props接收父组件传递的数据，并使用$emit方法触发input事件来更新父组件的数据。这样，当在子组件中输入内容时，父组件的数据message也会随之更新，同时父组件的数据变化也会反映在子组件中。
3、当需要在一个网页中嵌入另一个网页时，可以使用iframe(内嵌框架)标签实现嵌套。使用iframe嵌套可以实现诸如显示地图、引用其他网页内容、嵌入视频等功能。需要注意的是：如果是同源的网页，父级页面的javascript可以访问到iframe内嵌页面的资源，包括javascript对象，在这种请款
4、如图2所示，在某些情况下，希望iframe嵌套的网页也可以在父级网页和子级网页内的组件之间实现数据传递甚至是同步，但是vue.js是一个javascript框架，它的运行环境是单一的网页，基于vue.js的所有组件只是在单一页面内的逻辑封装，使用iframe形式嵌套的子级网页和父级页面是完全独立的两个环境，vue.js不可能跨页面运行实现组件数据传递。
5、例如面对现有已经上线正常运行的多个业务系统，希望开发一套图表展示工具，此工具提供统一样式的可视化图表，例如柱形图、折线图等，并提供简单的分析功能。这些图表通过iframe嵌入到各个业务系统，由业务系统传递数据，嵌入的图表页面负责接收数据并展示成图表，通过这样的方式简化各个业务系统数据分析功能的开发。由于业务系统全部基于vue.js技术栈开发，需要有一种方式能在页面和页面之间实现自动的组件数据绑定，即业务系统内可以用传统组件传参的方式向iframe页面内的组件传递参数，在必要时甚至实现数据的双向绑定和跨页面的事件发送。但是各个业务系统有独立并且不同的访问域名，图表展示工具的页面也会使用一个独立的域名访问，所以实现上述目的还需要解决跨域通信的问题。跨域是由于浏览器的安全策略限制导致的，为了保护用户数据的安全，浏览器禁止从一个域名下的页面直接访问另一个域名下的资源。
6、相应地，本领域需要一种新的在跨域页面间同步vue.js组件数据方案来解决上述问题。
技术实现思路
1、为了克服上述缺陷，提出了本专利技术，解决了现有技术中在实现跨域页面信息同步时遇到的上述技术问题。
2、本专利技术提供一种在跨域页面间同步vue.js组件数据的方法，应用于父级网页和子级网页之间，所述父级网页为独立页面，所述子级网页为通过iframe方法嵌入到父级网页的页面，所述方法包括步骤：
3、编写发送事件方法和对应的接收事件方法；
4、基于所述发送事件方法和接收事件方法编写第一hook和第二hook，所述第一hook用于实现父级网页发送数据和接收数据的逻辑，所述第二hook用于实现子级网页接收数据和发送数据的逻辑；
5、基于所述第一hook编写第一组件，基于所述第二hook编写第二组件，所述第一组件用于同步所述父级网页与第一hook之间的数据，所述第二组件用于同步所述子级网页与第二hook之间的数据。
6、进一步，在编写发送事件方法和对应的接收事件方法前，还包括步骤：编写序列化方法和反序列化方法。
7、进一步，所述发送事件方法包括步骤：
8、为本次事件生成随机id；
9、调用所述序列化方法序列化data；
10、组装需要发送的数据结构；
11、判断是否需要等待ready事件；
12、若否，则发送一次数据；
13、若是，先发送一次数据，在收到ready事件后，再发送一次数据。
14、进一步，所述接收事件方法包括步骤：
15、定义接收到事件的回调方法；
16、通过所述回调方法设置事件监听方法；
17、判断是否需要发出ready事件；
18、若否，则直接对外返回取消事件监听方法；
19、若是，在发出ready事件后，对外返回取消事件监听方法。
20、进一步，所述定义接收到事件的回调方法，包括步骤：
21、进入回调后，获取事件数据；
22、判断消息名称、消息框架和消息来源是否匹配，若否，则结束；
23、若是，则判断是否存在id信息，若否，则结束；
24、若是，则调用所述反序列化方法反序列化payload；
25、执行传入的handler后结束。
26、进一步，所述将所述发送事件方法封装为第一hook，包括步骤：
27、当父级网页加载完成后，不需要等待ready事件，通过所述发送事件方法向子级网页发送携带初始值数据的事件；
28、判断是否需要等待子级网页ready事件，如果需要，则开始等待ready事件，并在接收到ready事件时，再次发送携带初始数据的事件；
29、当初始值数据状态发生变化时，调用所述发送事件方法向子级网页发送携带新数据的事件；
30、设置接收到子级网页事件的回调，比较子级网页事件与父级网页的数据状态，如果数据状态不一致，更新父级网页。
31、进一步，所述将所述接收事件方法封装为第二hook，包括步骤：
32、当子级网页就绪后，向父级网页发送ready事件；
33、通过所述接收事件方法在接收到携带初始值数据的事件或携带新数据的事件后开始回调；
34、比较携带新数据的事件与子级网页的数据状态，如果数据状态不一致，更新子级网页；
35、当子级网页数据状态发生变化时，向父级网页发送携带新数据的子级网页事件。
36、本专利技术的有益效果为：
37、1.规避了浏览器的跨域安全策略，在跨域情况下父子级网页不能直接访问，本专利技术在子级网页通过事本文档来自技高网...
【技术保护点】
1.一种在跨域页面间同步Vue.js组件数据的方法，应用于父级网页和子级网页之间，所述父级网页为独立页面，所述子级网页为通过iframe方法嵌入到父级网页的页面，其特征在于，包括步骤：
2.根据权利要求1所述的一种在跨域页面间同步Vue.js组件数据的方法，其特征在于，在编写发送事件方法和对应的接收事件方法前，还包括步骤：编写序列化方法和反序列化方法。
3.根据权利要求2所述的一种在跨域页面间同步Vue.js组件数据的方法，其特征在于，所述发送事件方法包括步骤：
4.根据权利要求2所述的一种在跨域页面间同步Vue.js组件数据的方法，其特征在于，所述接收事件方法包括步骤：
5.根据权利要求4所述的一种在跨域页面间同步Vue.js组件数据的方法，其特征在于，所述定义接收到事件的回调方法，包括步骤：
6.根据权利要求1所述的一种在跨域页面间同步Vue.js组件数据的方法，其特征在于，所述将所述发送事件方法封装为第一hook，包括步骤：
7.根据权利要求6所述的一种在跨域页面间同步Vue.js组件数据的方法，其特征
...【技术特征摘要】
1.一种在跨域页面间同步vue.js组件数据的方法，应用于父级网页和子级网页之间，所述父级网页为独立页面，所述子级网页为通过iframe方法嵌入到父级网页的页面，其特征在于，包括步骤：
2.根据权利要求1所述的一种在跨域页面间同步vue.js组件数据的方法，其特征在于，在编写发送事件方法和对应的接收事件方法前，还包括步骤：编写序列化方法和反序列化方法。
3.根据权利要求2所述的一种在跨域页面间同步vue.js组件数据的方法，其特征在于，所述发送事件方法包括步骤：
4.根据权利要求2所述...
【专利技术属性】
技术研发人员：李杨，樊晓旺，张海庆，王璐，周华国，
申请(专利权)人：北京沃德博创信息科技有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。