CN110781010A - 用于在页面组件间传送数据的方法、装置以及设备、介质 - Google Patents

Abstract

本公开提供了一种用于在页面组件间传送数据的方法、装置以及电子设备、存储介质，涉及计算机技术领域，其中的方法包括：当与第一页面组件相对应的状态数据发生改变时，获得与第一页面组件具有嵌套关系的第二页面组件；判断第一页面组件和第二页面组件之间的嵌套层级是否大于预设的层级阈值；如果是，则使用基于vuex框架的第一页面组件间通信机制将状态数据传送给第二页面组件，以使第二页面组件基于状态数据进行相应地状态数据更新处理；本公开的方法、装置以及电子设备、存储介质，解决了页面组件间的状态数据维护困难的问题，提高了具有嵌套关系的页面组件共同维护的状态数据的一致性，提高了开发效率，减小了维护成本。

Description

用于在页面组件间传送数据的方法、装置以及设备、介质

技术领域

本公开涉及计算机技术领域，尤其涉及一种用于在页面组件间传送数据的方法、装置以及电子设备、存储介质。

背景技术

页面组件对状态数据和方法进行封装，状态数据可以为价格、时间、税费等数据。前端页面中的页面组件多并且组件间的数据交互频繁，不仅需要进行父子组件等之间的数据交互，还需要进行跨页面之间的页面组件之间的数据交互，导致前端页面在管理页面组件之间的数据状态时容易出现错误。

发明内容

为了解决上述技术问题，提出了本公开。本公开的实施例提供了一种用于在页面组件间传送数据的方法、装置以及电子设备、存储介质。

根据本公开实施例的一个方面，提供一种用于在页面组件间传送数据的方法，包括：当与第一页面组件相对应的状态数据发生改变时，获得与所述第一页面组件具有嵌套关系的第二页面组件；判断所述第一页面组件和所述第二页面组件之间的嵌套层级是否大于预设的层级阈值；如果是，则使用基于vuex框架的第一页面组件间通信机制将所述状态数据传送给所述第二页面组件，以使所述第二页面组件基于所述状态数据进行相应地状态数据更新处理；其中，所述第一页面组件和第二页面组件为基于vue框架的页面组件。

可选地，如果确定所述第一页面组件和所述第二页面组件的嵌套层级小于或等于预设的层级阈值，则使用基于vue框架的第二页面组件间通信机制将所述状态数据传送给所述第二页面组件，以使所述第二页面组件基于所述状态数据进行相应地状态数据更新处理。

可选地，所述使用基于vuex框架的第一页面组件间通信机制将所述状态数据传送给所述第二页面组件包括：预设数据存储对象，在所述数据存储对象内设置与所述状态数据相对应的全局状态数据变量；预设数据状态监控功能；其中，在所述第一页面组件和所述第二页面组件中都加入数据状态监控功能；当所述状态数据发生改变时，通过所述数据状态监控功能触发所述第一页面组件间通信机制利用所述数据存储对象将所述状态数据传送给所述第二页面组件。

可选地，所述通过所述数据状态监控功能触发所述第一页面组件间通信机制利用所述数据存储对象将所述状态数据传送给所述第二页面组件包括：预设与所述状态数据相对应的、基于所述vuex框架的mutations方法和getter方法；当所述状态数据发生改变时，通过所述数据状态监控功能调用所述mutations方法，使用所述mutations方法修改所述数据存储对象中的所述全局状态数据变量；当所述全局状态数据变量发生变化时，触发与发生变化的全局状态数据变量对应的所述getter方法，使用所述getter方法将所述发生变化的全局状态数据变量传送给所述第二页面组件。

可选地，将所述mutations方法和所述getter方法编译为静态方法。

可选地，所述层级阈值为2；所述使用基于vue框架的第二页面组件间通信机制将所述状态数据传送给所述第二页面组件包括：当所述第一页面组件为父组件时，使用基于所述vue框架的props方法将所述状态数据传送给作为子组件的所述第二页面组件；或者，当所述第一页面组件为子组件时，使用基于所述vue框架的emit事件方法将所述状态数据传送给作为父组件的所述第二页面组件。

可选地，在所述第二页面组件中定义、实现所述props方法；或者，在所述第一页面组件中定义、实现所述emit事件方法。

可选地，基于预设的页面文件结构规则对页面文件进行解析，获得所述页面文件中的页面组件之间的嵌套层次关系；基于所述嵌套层次关系确定所述第一页面组件和所述第二页面组件之间的嵌套关系以及嵌套层级。

根据本公开实施例的另一方面，提供一种用于在页面组件间传送数据的装置，包括：嵌套关系获得模块，用于当与第一页面组件相对应的状态数据发生改变时，获得与所述第一页面组件具有嵌套关系的第二页面组件；嵌套层级判断模块，用于判断所述第一页面组件和所述第二页面组件之间的嵌套层级是否大于预设的层级阈值；状态数据传送模块，用于如果是，则使用基于vuex框架的第一页面组件间通信机制将所述状态数据传送给所述第二页面组件，以使所述第二页面组件基于所述状态数据进行相应地状态数据更新处理；其中，所述第一页面组件和第二页面组件为基于vue框架的页面组件。

可选地，所述状态数据传送模块，用于如果确定所述第一页面组件和所述第二页面组件的嵌套层级小于或等于预设的层级阈值，则使用基于vue框架的第二页面组件间通信机制将所述状态数据传送给所述第二页面组件，以使所述第二页面组件基于所述状态数据进行相应地状态数据更新处理。

可选地，所述状态数据传送模块，包括：第一传送模块，用于预设数据存储对象，在所述数据存储对象内设置与所述状态数据相对应的全局状态数据变量；预设数据状态监控功能；其中，在所述第一页面组件和所述第二页面组件中都加入数据状态监控功能；当所述状态数据发生改变时，通过所述数据状态监控功能触发所述第一页面组件间通信机制利用所述数据存储对象将所述状态数据传送给所述第二页面组件。

可选地，所述第一传送模块，还用于预设与所述状态数据相对应的、基于所述vuex框架的mutations方法和getter方法；当所述状态数据发生改变时，通过所述数据状态监控功能调用所述mutations方法，使用所述mutations方法修改所述数据存储对象中的所述全局状态数据变量；当所述全局状态数据变量发生变化时，触发与发生变化的全局状态数据变量对应的所述getter方法，使用所述getter方法将所述发生变化的全局状态数据变量传送给所述第二页面组件。

可选地，所述第一传送模块，还用于将所述mutations方法和所述getter方法编译为静态方法。

可选地，所述层级阈值为2；所述状态数据传送模块，包括：第二传送模块，用于当所述第一页面组件为父组件时，使用基于所述vue框架的props方法将所述状态数据传送给作为子组件的所述第二页面组件；或者，当所述第一页面组件为子组件时，使用基于所述vue框架的emit事件方法将所述状态数据传送给作为父组件的所述第二页面组件。

可选地，所述第二传送模块，还用于在所述第二页面组件中定义、实现所述props方法；或者，在所述第一页面组件中定义、实现所述emit事件方法。

可选地，所述嵌套关系获得模块，还用于基于预设的页面文件结构规则对页面文件进行解析，获得所述页面文件中的页面组件之间的嵌套层次关系；基于所述嵌套层次关系确定所述第一页面组件和所述第二页面组件之间的嵌套关系以及嵌套层级。

根据本公开实施例的又一方面，提供一种计算机可读存储介质，所述存储介质存储有计算机程序，所述计算机程序用于执行上述的方法。

根据本公开实施例的再一方面，提供一种电子设备，所述电子设备包括：处理器；用于存储所述处理器可执行指令的存储器；所述处理器，用于执行上述的方法。

基于本公开上述实施例提供的用于在页面组件间传送数据的方法、装置以及电子设备、存储介质，解决了页面组件间的状态数据维护困难的问题，提高了具有嵌套关系的页面组件共同维护的状态数据的一致性，提高了开发效率，减小了维护成本，增加系统的可靠性。

下面通过附图和实施例，对本公开的技术方案做进一步的详细描述。

附图说明

通过结合附图对本公开实施例进行更详细的描述，本公开的上述以及其他目的、特征以及优势将变得更加明显。附图用来提供对本公开实施例的进一步的理解，并且构成说明书的一部分，与本公开实施例一起用于解释本公开，并不构成对本公开的限制。在附图中，相同的参考标号通常代表相同部件或步骤。

图1为本公开的用于在页面组件间传送数据的方法的一个实施例的流程图；

图2为本公开的用于在页面组件间传送数据的方法的另一个实施例的流程图；

图3为本公开的用于在页面组件间传送数据的方法的一个实施例中传送状态数据的流程图；

图4为本公开的用于在页面组件间传送数据的方法的一个实施例中使用第一页面组件间通信机制传送状态数据的流程图；

图5为本公开的用于在页面组件间传送数据的方法的另一个实施例中使用第二页面组件间通信机制传送状态数据的流程图；

图6为本公开的用于在页面组件间传送数据的装置的一个实施例的模块示意图；

图7为本公开的用于在页面组件间传送数据的装置的一个实施例中的状态数据传送模块的模块示意图；

图8是本公开的电子设备的一个实施例的结构图。

具体实施方式

下面将参考附图详细地描述根据本公开的示例实施例。显然，所描述的实施例仅仅是本公开的一部分实施例，而不是本公开的全部实施例，应理解，本公开不受这里描述的示例实施例的限制。

应注意到：除非另外具体说明，否则在这些实施例中阐述的部件和步骤的相对布置、数字表达式和数值不限制本公开的范围。

本领域技术人员可以理解，本公开实施例中的“第一”、“第二”等术语仅用于区别不同步骤、设备或模块等，既不代表任何特定技术含义，也不表示它们之间的必然逻辑顺序。

还应理解，在本公开实施例中，“多个”可以指两个或者两个以上，“至少一个”可以指一个、两个或两个以上。

还应理解，对于本公开实施例中提及的任一部件、数据或结构，在没有明确限定或者在前后文给出相反启示的情况下，一般可以理解为一个或多个。

另外，本公开中术语“和/或”，仅是一种描述关联对象的关联关系，表示可以存在三种关系，如A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本公开中字符“/”，一般表示前后关联对象是一种“或”的关系。

还应理解，本公开对各个实施例的描述着重强调各个实施例之间的不同之处，其相同或相似之处可以相互参考，为了简洁，不再一一赘述。

同时，应当明白，为了便于描述，附图中所示出的各个部分的尺寸并不是按照实际的比例关系绘制的。

以下对至少一个示例性实施例的描述实际上仅仅是说明性的，决不作为对本公开及其应用或使用的任何限制。

对于相关领域普通技术人员已知的技术、方法和设备可能不作详细讨论，但在适当情况下，所述技术、方法和设备应当被视为说明书的一部分。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步讨论。

本公开的实施例可以应用于终端设备、计算机系统、服务器等电子设备，其可与众多其它通用或者专用计算系统环境或配置一起操作。适于与终端设备、计算机系统或者服务器等电子设备一起使用的众所周知的终端设备、计算系统、环境和/或配置的例子包括但不限于：个人计算机系统、服务器计算机系统、瘦客户机、厚客户机、手持或膝上设备、基于微处理器的系统、机顶盒、可编程消费电子产品、网络个人电脑、小型计算机系统、大型计算机系统和包括上述任何系统的分布式云计算技术环境等等。

终端设备、计算机系统、服务器等电子设备可以在由计算机系统执行的计算机系统可执行指令(诸如程序模块)的一般语境下描述。通常，程序模块可以包括例程、程序、目标程序、组件、逻辑、数据结构等等，它们执行特定的任务或者实现特定的抽象数据类型。计算机系统/服务器可以在分布式云计算环境中实施。在分布式云计算环境中，任务可以是由通过通信网络链接的远程处理设备执行的。在分布式云计算环境中，程序模块可以位于包括存储设备的本地或远程计算系统存储介质上。

申请概述

在实现本公开的过程中，发明人发现，在业务系统中通常涉及多个业务环节。例如，业务系统中的业务流程具有一系列的业务环节，各个业务环节之间的流程非常复杂，网页组件模块繁多，且网页组件间数据交互频繁。在系统运行时，不仅需要维护父子组件，兄弟组件间的数据交互逻辑，还要维护跨页面之间的页面组件交互，对于页面组件间的状态数据维护困难。

本公开提供的用于在页面组件间传送数据的方法，当第一页面组件和与第一页面组件具有嵌套关系的第二页面组件之间的嵌套层级大于预设的层级阈值时，使用基于vuex框架的第一页面组件间通信机制将状态数据传送给第二页面组件，以使第二页面组件基于状态数据进行相应地状态数据更新处理，解决了页面组件间的状态数据维护困难的问题，提高了具有嵌套关系的页面组件共同维护的状态数据的一致性。

示例性方法

图1为本公开的用于在页面组件间传送数据的方法的一个实施例的流程图，如图1所示的方法包括步骤：S101-S103。下面对各步骤分别进行说明。

S101，当与第一页面组件相对应的状态数据发生改变时，获得与第一页面组件具有嵌套关系的第二页面组件。

第一页面组件和第二页面组件为基于vue框架的页面组件。Vue框架，即vue.js，是一套构建用户界面的渐进式框架，Vue采用自下向上增量开发的设计，能够实现数据绑定。基于vue框架能够根据对应的元素，进行设置元素数据，通过输入框，以及get获取数据等多种方式进行数据的实时绑定，进行网页及应用的数据渲染。基于vue框架能够进行组件式开发，可以将一个web开发中设计的各种模块进行拆分，变成单独的组件并进行数据、功能的绑定、封装。

第一页面组件、第二页面组件将状态数据、功能等封装起来，包装成一个对象。具有嵌套关系的第一页面组件和第二页面组件符合嵌套规则，子组件在父组件上注册，父组件要到Vue实例上去注册。第一页面组件、第二页面组件绑定相同的状态数据，状态数据可以为多种，例如为与网签、面签、批贷、缴税、过户等业务相关的状态数据。第一页面组件和第二页面组件可以在同一个网页中，也可以在不同的网页中。

S102，判断第一页面组件和第二页面组件之间的嵌套层级是否大于预设的层级阈值。

基于预设的页面文件结构规则对页面文件进行解析，获得页面文件中的页面组件之间的嵌套层次关系，在嵌套层次关系中，下级组件嵌套在上级组件中，或者下级组件继承、重载上级组件，或者下级组件调用上级的属性、方法等。基于嵌套层次关系确定第一页面组件和第二页面组件之间的嵌套关系以及嵌套层级。页面文件结构规则可以为vue框架的js网页结构规则等。层级阈值可以设置为2、3等。

S103，如果是(即大于预设的层级阈值)，则使用基于vuex框架的第一页面组件间通信机制将状态数据传送给第二页面组件，以使第二页面组件基于状态数据进行相应地状态数据更新处理。使用基于vuex框架的第一页面组件间通信机制可以将下级页面组件中改变的状态数据传送给上级页面组件，也可以将上级页面组件中改变的状态数据传送给下级页面组件，实现双向传送。

Vuex是一个专为Vue服务，用于管理页面数据状态、提供统一数据操作的框架，集中于MVC模式中的Model层，第一页面组件间通信机制可以有多种实现方式。例如，使用第一页面组件间通信机制，可以通过action–mutation–state change的流程来进行数据传送，结合Vue的数据视图双向绑定特性实现数据更新处理。第二页面组件基于第一页面组件中被修改的状态数据，更新第二页面组件中与此状态数据相对应的状态数据，并进行页面的展示更新等处理。

图2为本公开的用于在页面组件间传送数据的方法的另一个实施例的流程图，如图2所示的方法包括步骤：S201-S202。下面对各步骤分别进行说明。

S201，确定第一页面组件和第二页面组件的嵌套层级小于或等于预设的层级阈值。层级阈值可以设置为2。

S202，使用基于vue框架的第二页面组件间通信机制将状态数据传送给第二页面组件，以使第二页面组件基于状态数据进行相应地状态数据更新处理。

第二页面组件间通信机制可以有多种通信方式，例如，使用第二页面组件间通信机制将第一页面组件中修改的状态数据传送给第二页面组件，第二页面组件基于第一页面组件中被修改的状态数据，更新第二页面组件中与此状态数据相对应的状态数据，并进行页面的展示更新等。

图3为本公开的用于在页面组件间传送数据的方法的一个实施例中传送状态数据的流程图，如图3所示的方法包括步骤：S301-S303。下面对各步骤分别进行说明。

S301，预设数据存储对象，在数据存储对象内设置与状态数据相对应的全局状态数据变量。

数据存储对象可以为vue框架的store对象，为页面状态管理容器对象。在数据存储对象中集中存储页面组件中的状态数据，例如为网签、面签、批贷、缴税、过户等业务相关的状态数据，在数据存储对象中设置与状态数据相对应的全局状态数据变量，为全局唯一，能够对状态数据进行统一的状态管理，页面显示所需的数据从该数据存储对象中进行读取。

S302，预设数据状态监控模块，其中，在每个页面组件中都加入数据局状态监控模块。可以在第一页面组件和第二页面组件中都加入数据状态监控模块。数据状态监控模块用于执行数据状态监控功能，即为预设数据状态监控功能。

S303，当状态数据发生改变时，通过数据状态监控模块触发第一页面组件间通信机制利用数据存储对象将状态数据传送给第二页面组件。

图4为本公开的用于在页面组件间传送数据的方法的一个实施例中使用第一页面组件间通信机制传送状态数据的流程图，如图4所示的方法包括步骤：S401-S403。下面对各步骤分别进行说明。

S401，预设与状态数据相对应的、基于vuex框架的mutations方法和getter方法。

Mutations方法为vuex框架的状态改变操作方法，用于对与状态数据相对应的全局状态数据变量进行同步修改操作等，Mutations方法的方法名为全局唯一。getter方法为vuex框架的对象读取方法，用于读取与状态数据相对应的全局状态数据变量，getter方法的方法名为全局唯一。可以将mutations方法和getter方法编译为静态方法。

S402，当状态数据发生改变时，通过数据状态监控模块调用mutations方法，使用mutations方法修改数据存储对象中的全局状态数据变量。

S403，当全局状态数据变量发生变化时，触发与发生变化的全局状态数据变量对应的getter方法，使用此getter方法将发生变化的全局状态数据变量传送给第二页面组件。可以通过数据存储对象触发与发生变化的全局状态数据变量对应的getter方法，可以将下级页面组件中改变的状态数据传送给上级页面组件，也可以将上级页面组件中改变的状态数据传送给下级页面组件，实现双向传送。

在一个实施例中，预先安装系统依赖的软件模块，例如预先安装vue、vuex等软件模块，vue软件模块用于前端实现框架，可用其封装页面组件，Vuex软件模块可以为管理vue页面组件状态的插件。预设数据存储对象store，在store对象内设置与状态数据相对应的全局状态数据变量,对状态数据进行统一的状态管理。

预设数据状态监控模块StoreMoniter，可以在每个页面组件中都加入StoreMoniter模块。预设与状态数据相对应的、基于vuex框架的mutations方法和getter方法。例如，StoreMoniter模块的具体实现代码如下所示：

其中，StoreMoniter中具有types.CHANGE_INDEX_PARAMS、types.CHANGE_ORDER_INPROGRESS_CONTRAST_PARAMS两个mutations方法，分别用于对store中的全局变量indexParams、OrderInprogressContrastParams的状态改变进行操作。

将mutations方法和getter方法编译为静态方法。例如，封装mutation-types模块，以便编译时代码静态转换，mutation-types模块的具体实现代码如下所示：

export const CHANGE_INDEX_PARAMS＝‘CHANGE_INDEX_PARAMS’

export const CHANGE_ORDER_INPROGRESS_CONTRAST_PARAMS＝’CHANGE_ORDER_INPROGRESS_CONTRAST_PARAMS’

其中，在mutation-types模块封装了静态的两个Mutations方法：CHANGE_INDEX_PARAMS、CHANGE_ORDER_INPROGRESS_CONTRAST_PARAM。

当状态数据发生改变时，提交改变的数据。在组件中引入storeMonitor模块，调用定义的commit方法提交数据。例如，在组件中引入storeMonitor模块的具体实现代码如下所示：

通过storeMonitor调用mutations方法，用于触发对应mutations方法,将改变的状态数据保存到store对象中。例如，mutations方法的具体实现代码如下所示：

其中，实现了两个Mutations方法：types.CHANGE_INDEX_PARAMS、types.CHANGE_ORDER_INPROGRESS_CONTRAST_PARAM。

当store对象中的状态数据(全局状态数据变量)改变，触发与改变的状态数据绑定getters，将发生变化的状态数据传送给第二页面组件，用于更新渲染第二页面组件。例如，getters方法的具体实现代码如下所示：

其中，对store对象中的indexParams、orderInprogressContrastParams绑定对应的getters。

在创建mutations时利用mutations-type模块对其进行静态转换提升编译效率，同时利用storeMonitor模块对系统中修改全局数据状态的方法进行统一封装管理，从而增加系统的可维护性。

当与indexParams、orderInprogressContrastParams相对应的第一页面组件中的状态数据发生改变时，通过storeMonitor模块调用types.CHANGE_INDEX_PARAMS、types.CHANGE_ORDER_INPROGRESS_CONTRAST_PARAM对store对象中的indexParams、orderInprogressContrastParams的值进行修改，store对象触发与indexParams、orderInprogressContrastParams绑定getters，将indexParams、orderInprogressContrastParams的新值传送给第二页面组件，更新渲染第二页面组件。

图5为本公开的用于在页面组件间传送数据的方法的另一个实施例中使用第二页面组件间通信机制传送状态数据的流程图，如图5所示的方法包括步骤：S501-S504。下面对各步骤分别进行说明。

S501,确定第一页面组件和第二页面组件的嵌套层级等于2。

如果嵌套层级为2层，则使用第二页面组件间通信机制传递更新的状态数据，如果嵌套层级多于2层，则利用storeMoniter模块进行数据集中管理。

S502,判断第一页面组件是否为父组件，如果是，进入步骤503，如果否，进入步骤504。

S503，当第一页面组件为父组件时，使用基于vue框架的props方法将状态数据传送给作为子组件的第二页面组件。子组件通过props方法获取父组件传递过来的值，props方法中可以定义能接收的数据类型，如果不符合会报错。

S504，当第一页面组件为子组件时，使用基于vue框架的emit事件方法将状态数据传送给作为父组件的第二页面组件。子组件往父组件传值，可以通过emit事件方法。可以在第二页面组件中定义、实现props方法；或者，在第一页面组件中定义、实现emit事件方法。

示例性装置

在一个实施例中，如图6所示，本公开提供一种用于在页面组件间传送数据的装置，包括：嵌套关系获得模块601、嵌套层级判断模块602和状态数据传送模块603。当与第一页面组件相对应的状态数据发生改变时，嵌套关系获得模块601获得与第一页面组件具有嵌套关系的第二页面组件，第一页面组件和第二页面组件为基于vue框架的页面组件。

嵌套层级判断模块602判断第一页面组件和第二页面组件之间的嵌套层级是否大于预设的层级阈值，如果第一页面组件和第二页面组件之间的嵌套层级大于预设的层级阈值，则状态数据传送模块603使用基于vuex框架的第一页面组件间通信机制将状态数据传送给第二页面组件，以使第二页面组件基于状态数据进行相应地状态数据更新处理。

状态数据传送模块603如果确定第一页面组件和第二页面组件的嵌套层级小于或等于预设的层级阈值，则状态数据传送模块603使用基于vue框架的第二页面组件间通信机制将状态数据传送给第二页面组件，以使第二页面组件基于状态数据进行相应地状态数据更新处理。

嵌套关系获得模块601基于预设的页面文件结构规则对页面文件进行解析，获得页面文件中的页面组件之间的嵌套层次关系。嵌套关系获得模块601基于嵌套层次关系确定第一页面组件和第二页面组件之间的嵌套关系以及嵌套层级。

在一个实施例中，如图7所示，状态数据传送模块603包括：第一传送模块6031和第二传送模块6032。第一传送模块6031预设数据存储对象，在数据存储对象内设置与状态数据相对应的全局状态数据变量；第一传送模块6031预设数据状态监控模块，其中，在第一页面组件和第二页面组件中都加入数据状态监控模块。当状态数据发生改变时，第一传送模块6031通过数据状态监控模块触发第一页面组件间通信机制利用数据存储对象将状态数据传送给第二页面组件。

第一传送模块6031预设与状态数据相对应的、基于vuex框架的mutations方法和getter方法。当状态数据发生改变时，第一传送模块6031通过数据状态监控模块调用mutations方法，使用mutations方法修改数据存储对象中的全局状态数据变量。当全局状态数据变量发生变化时，第一传送模块6031触发与发生变化的全局状态数据变量对应的getter方法，使用此getter方法将发生变化的全局状态数据变量传送给第二页面组件。第一传送模块6031将mutations方法和getter方法编译为静态方法。

在一个实施例中，层级阈值为2，当第一页面组件为父组件时，第二传送模块6032使用基于vue框架的props方法将状态数据传送给作为子组件的第二页面组件；或者，当第一页面组件为子组件时，第二传送模块6032使用基于vue框架的emit事件方法将状态数据传送给作为父组件的第二页面组件。可以在第二页面组件中定义、实现props方法；在第一页面组件中定义、实现emit事件方法。

图8是本公开的电子设备的一个实施例的结构图，如图8所示，电子设备81包括一个或多个处理器811和存储器812。

处理器811可以是中央处理单元(CPU)或者具有数据处理能力和/或指令执行能力的其他形式的处理单元，并且可以控制电子设备81中的其他组件以执行期望的功能。

存储器812可以包括一个或多个计算机程序产品，计算机程序产品可以包括各种形式的计算机可读存储介质，例如易失性存储器和/或非易失性存储器。易失性存储器，例如，可以包括：随机存取存储器(RAM)和/或高速缓冲存储器(cache)等。非易失性存储器，例如，可以包括：只读存储器(ROM)、硬盘以及闪存等。在计算机可读存储介质上可以存储一个或多个计算机程序指令，处理器811可以运行程序指令，以实现上文的本公开的各个实施例的用于在页面组件间传送数据的方法以及/或者其他期望的功能。在计算机可读存储介质中还可以存储诸如输入信号、信号分量、噪声分量等各种内容。

在一个示例中，电子设备81还可以包括：输入装置813以及输出装置814等，这些组件通过总线系统和/或其他形式的连接机构(未示出)互连。此外，该输入设备813还可以包括例如键盘、鼠标等等。该输出装置814可以向外部输出各种信息。该输出设备814可以包括例如显示器、扬声器、打印机、以及通信网络及其所连接的远程输出设备等等。

当然，为了简化，图8中仅示出了该电子设备81中与本公开有关的组件中的一些，省略了诸如总线、输入/输出接口等等的组件。除此之外，根据具体应用情况，电子设备81还可以包括任何其他适当的组件。

除了上述方法和设备以外，本公开的实施例还可以是计算机程序产品，其包括计算机程序指令，计算机程序指令在被处理器运行时使得处理器执行本说明书上述“示例性方法”部分中描述的根据本公开各种实施例的用于在页面组件间传送数据的方法中的步骤。

计算机程序产品可以以一种或多种程序设计语言的任意组合来编写用于执行本公开实施例操作的程序代码，程序设计语言包括面向对象的程序设计语言，诸如Java、C++等，还包括常规的过程式程序设计语言，诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。

此外，本公开的实施例还可以是计算机可读存储介质，其上存储有计算机程序指令，所述计算机程序指令在被处理器运行时使得所述处理器执行本说明书上述“示例性方法”部分中描述的根据本公开各种实施例的用于在页面组件间传送数据的方法中的步骤。

所述计算机可读存储介质可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以包括但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列举)可以包括：具有一个或者多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。

以上结合具体实施例描述了本公开的基本原理，但是，需要指出的是，在本公开中提及的优点、优势、效果等仅是示例而非限制，不能认为这些优点、优势以及效果等是本公开的各个实施例必须具备的。另外，上述公开的具体细节仅是为了示例的作用和便于理解的作用，而非限制，上述细节并不限制本公开为必须采用上述具体的细节来实现。

上述实施例中的用于在页面组件间传送数据的方法、装置以及电子设备、存储介质，当第一页面组件和与第一页面组件具有嵌套关系的第二页面组件之间的嵌套层级大于预设的层级阈值时，使用基于vuex框架的第一页面组件间通信机制将状态数据传送给第二页面组件，以使第二页面组件基于状态数据进行相应地状态数据更新处理；解决了页面组件间的状态数据维护困难的问题，提高了具有嵌套关系的页面组件共同维护的状态数据的一致性，提高了开发效率，减小了维护成本，增加系统的可靠性。

本说明书中各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其它实施例的不同之处，各个实施例之间相同或相似的部分相互参见即可。对于系统实施例而言，由于其与方法实施例基本对应，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

本公开中涉及的器件、装置、设备、系统的方框图仅作为例示性的例子并且不意图要求或暗示必须按照方框图示出的方式进行连接、布置、配置。如本领域技术人员将认识到的，可以按任意方式连接、布置、配置这些器件、装置、设备以及系统。诸如“包括”、“包含、“具有”等等的词语是开放性词汇，指“包括但不限于”，且可与其互换使用。这里所使用的词汇“或”和“和”指词汇“和/或”，且可与其互换使用，除非上下文明确指示不是如此。这里所使用的词汇“诸如”指词组“诸如但不限于”，且可与其互换使用。

可能以许多方式来实现本公开的方法和装置。例如，可通过软件、硬件、固件或者软件、硬件、固件的任何组合来实现本公开的方法和装置。用于所述方法的步骤的上述顺序仅是为了进行说明，本公开的方法的步骤不限于以上具体描述的顺序，除非以其它方式特别说明。此外，在一些实施例中，还可将本公开实施为记录在记录介质中的程序，这些程序包括用于实现根据本公开的方法的机器可读指令。因而，本公开还覆盖存储用于执行根据本公开的方法的程序的记录介质。

还需要指出的是，在本公开的装置、设备和方法中，各部件或各步骤是可以分解和/或重新组合的。这些分解和/或重新组合应视为本公开的等效方案。

提供所公开的方面的以上描述，以使本领域的任何技术人员能够做出或者使用本公开。对这些方面的各种修改等对于本领域技术人员而言，是非常显而易见的，并且在此定义的一般原理可以应用于其他方面，而不脱离本公开的范围。因此，本公开不意图被限制到在此示出的方面，而是按照与在此公开的原理和新颖的特征一致的最宽范围。

为了例示和描述的目的已经给出了以上描述。此外，此描述不意图将本公开的实施例限制到在此公开的形式中。尽管以上已经讨论了多个示例方面以及实施例，但是本领域技术人员将认识到其某些变型、修改、改变、添加和子组合。

Claims (10)

1.一种用于在页面组件间传送数据的方法，包括：

当与第一页面组件相对应的状态数据发生改变时，获得与所述第一页面组件具有嵌套关系的第二页面组件；

判断所述第一页面组件和所述第二页面组件之间的嵌套层级是否大于预设的层级阈值；

如果大于预设的层级阈值，则使用基于vuex框架的第一页面组件间通信机制将所述状态数据传送给所述第二页面组件，以使所述第二页面组件基于所述状态数据进行相应地状态数据更新处理；

其中，所述第一页面组件和第二页面组件为基于vue框架的页面组件。

2.如权利要求1所述的方法，还包括：

如果确定所述第一页面组件和所述第二页面组件的嵌套层级小于或等于预设的层级阈值，则使用基于vue框架的第二页面组件间通信机制将所述状态数据传送给所述第二页面组件，以使所述第二页面组件基于所述状态数据进行相应地状态数据更新处理。

3.如权利要求1或2所述的方法，所述使用基于vuex框架的第一页面组件间通信机制将所述状态数据传送给所述第二页面组件包括：

预设数据存储对象，在所述数据存储对象内设置与所述状态数据相对应的全局状态数据变量；

预设数据状态监控功能；其中，在所述第一页面组件和所述第二页面组件中都加入数据状态监控功能；

当所述状态数据发生改变时，通过所述数据状态监控功能触发所述第一页面组件间通信机制利用所述数据存储对象将所述状态数据传送给所述第二页面组件。

4.如权利要求3所述的方法，所述通过所述数据状态监控功能触发所述第一页面组件间通信机制利用所述数据存储对象将所述状态数据传送给所述第二页面组件包括：

预设与所述状态数据相对应的、基于所述vuex框架的mutations方法和getter方法；

当所述状态数据发生改变时，通过所述数据状态监控功能调用所述mutations方法，使用所述mutations方法修改所述数据存储对象中的所述全局状态数据变量；

当所述全局状态数据变量发生变化时，触发与发生变化的全局状态数据变量对应的所述getter方法，使用所述getter方法将所述发生变化的全局状态数据变量传送给所述第二页面组件。

5.如权利要求4所述的方法，还包括：

将所述mutations方法和所述getter方法编译为静态方法。

6.如权利要求3所述的方法，其中，所述层级阈值为2；所述使用基于vue框架的第二页面组件间通信机制将所述状态数据传送给所述第二页面组件包括：

当所述第一页面组件为父组件时，使用基于所述vue框架的props方法将所述状态数据传送给作为子组件的所述第二页面组件；或者，

当所述第一页面组件为子组件时，使用基于所述vue框架的emit事件方法将所述状态数据传送给作为父组件的所述第二页面组件。

7.如权利要求6所述的方法，其中，

在所述第二页面组件中定义、实现所述props方法；或者，在所述第一页面组件中定义、实现所述emit事件方法。

8.一种用于在页面组件间传送数据的装置，包括：

嵌套关系获得模块，用于当与第一页面组件相对应的状态数据发生改变时，获得与所述第一页面组件具有嵌套关系的第二页面组件；

嵌套层级判断模块，用于判断所述第一页面组件和所述第二页面组件之间的嵌套层级是否大于预设的层级阈值；

状态数据传送模块，用于如果大于预设的层级阈值，则使用基于vuex框架的第一页面组件间通信机制将所述状态数据传送给所述第二页面组件，以使所述第二页面组件基于所述状态数据进行相应地状态数据更新处理；

其中，所述第一页面组件和第二页面组件为基于vue框架的页面组件。

9.一种计算机可读存储介质，所述存储介质存储有计算机程序，所述计算机程序用于执行上述权利要求1-7任一项所述的方法。

10.一种电子设备，所述电子设备包括：

处理器；用于存储所述处理器可执行指令的存储器；

所述处理器，用于从所述存储器中读取所述可执行指令，并执行所述指令以实现上述权利要求1-7任一项所述的方法。

Images