CN108268252A - 添加组件属性的方法和装置 - Google Patents

Abstract

本发明公开了一种添加组件属性的方法和装置。其中，该方法包括：给组件设置一个初始自定义对象作为属性参数；给初始自定义对象添加一个数据属性，并给数据属性赋予一个第一自定义对象；根据第一自定义对象获取自定义属性；给初始自定义对象添加方法和/或函数属性，并给方法和/或函数属性赋予一个第二自定义对象，并基于第二自定义对象给自定义属性赋值。本发明解决了现有技术中，直接在目标对象中动态添加自定义对象的属性，DOM界面不随之发生变化的技术问题。

Description

添加组件属性的方法和装置

技术领域

本发明涉及计算机领域，具体而言，涉及一种添加组件属性的方法和装置。

背景技术

在使用Vue.js框架创建Vue组件时，需要提供一个自定义对象作为参数，在作为该参数的自定义对象中提供data属性，并且该data属性绑定了另一个自定义对象，并在另一个自定义对象中声明了几个属性。如果在自定义对象中也提供了methods、events等属性方法，或created、ready等生命周期钩子函数，在这些方法或钩子函数中，如果对data属性绑定的自定义对象中已声明的属性，修改属性值，Vue组件绑定的DOM界面会根据修改的属性值发生改变，但是对data属性绑定的自定义对象动态添加属性，Vue组件绑定的DOM界面不会对新添加的属性做出响应。

针对现有技术中，直接在目标对象中动态添加自定义对象的属性，DOM界面不随之发生变化的问题，目前尚未提出有效的解决方案。

发明内容

本发明实施例提供了一种添加组件属性的方法和装置，以至少解决现有技术中，直接在目标对象中动态添加自定义对象的属性，DOM界面不随之发生变化的技术问题。

根据本发明实施例的一个方面，提供了一种添加组件属性的方法，包括：给组件设置一个初始自定义对象作为属性参数；给初始自定义对象添加一个数据属性，并给数据属性赋予一个第一自定义对象；根据第一自定义对象获取自定义属性；给初始自定义对象添加方法和/或函数属性，并给方法和/或函数属性赋予一个第二自定义对象，基于第二自定义对象给自定义属性赋值。

进一步地，根据第一自定义对象获取自定义属性包括：给第一自定义对象添加一个属性，并给属性赋予一个第三自定义对象，通过第三自定义对象添加自定义属性。

进一步地，给初始自定义对象添加方法和/或函数属性，并给方法和/或函数属性赋予一个第二自定义对象，基于第二自定义对象给自定义属性赋值包括：给初始自定义对象添加第一方法和/或函数属性，并给第一方法和/或函数属性赋予一个第二自定义对象；给第二自定义对象添加第二方法和/或函数属性，并给第二方法和/或函数属性赋予一个方法和/或函数，方法和/或函数中给自定义属性赋予一个第四自定义对象，通过第四自定义对象给自定义属性赋值。

进一步地，自定义属性包括属性名和属性值。

进一步地，给自定义属性赋值包括给自定义属性赋予属性名和属性值。

根据本发明实施例的另一方面，还提供了一种添加组件属性的装置，包括：设置模块，用于给组件设置一个初始自定义对象作为属性参数；添加模块，用于给初始自定义对象添加一个数据属性，并给数据属性赋予一个第一自定义对象；获取模块，用于根据第一自定义对象获取自定义属性；赋值模块，用于给初始自定义对象添加方法和/或函数属性，并给方法和/或函数属性赋予一个第二自定义对象，并基于第二自定义对象给自定义属性赋值。

进一步地，获取模块包括：第一添加子模块，用于给第一自定义对象添加一个属性，并给属性赋予一个第三自定义对象，通过第三自定义对象添加自定义属性。

进一步地，赋值模块包括：第二添加子模块，用于给初始自定义对象添加第一方法和/或函数属性，并给第一方法和/或函数属性赋予一个第二自定义对象；赋值子模块，用于给第二自定义对象添加第二方法和/或函数属性，并给第二方法和/或函数属性赋予一个方法和/或函数，方法和/或函数中给自定义属性赋予一个第四自定义对象，通过第四自定义对象给自定义属性赋值。

进一步地，自定义属性包括属性名和属性值。

进一步地，给自定义属性赋值包括给自定义属性赋予属性名和属性值。

在本发明实施例中，创建第一自定义对象，将目标对象中属性的赋值对象替换为第一自定义对象。上述方案通过替换目标对象中属性的赋值对象，使得DOM能够随着目标对象中增加的属性发生改变，从而解决了现有技术中，直接在目标对象中添加自定义对象的属性，DOM不随之发生变化的技术问题。

附图说明

此处所说明的附图用来提供对本发明的进一步理解，构成本申请的一部分，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：

图1是根据本发明实施例的一种添加组件属性的方法的流程图；

图2是根据本发明实施例的一种添加组件属性的装置的示意图；

图3是根据本发明实施例可选的一种添加组件属性的装置的示意图；以及

图4是根据本发明实施例可选的一种添加组件属性的装置的示意图。

具体实施方式

为了使本技术领域的人员更好地理解本发明方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分的实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本发明保护的范围。

需要说明的是，本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本发明的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

首先，对本申请实施例进行描述的过程中出现的部分名词或术语适用于如下解释：

Vue.js：Vue.js是一个构建数据驱动的web界面的库。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。Vue.js自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js也能完美地驱动复杂的单页应用。

DOM：文档对象模型(DOM)是HTML和XML文档的编程接口。它给文档(结构树)提供了一个结构化的表述并且定义了一种方式—程序可以对结构树进行访问，以改变文档的结构，样式和内容。DOM提供了一种表述形式—将文档作为一个结构化的节点组以及包含属性和方法的对象。从本质上说，它将web页面和脚本或编程语言连接起来了。

自定义对象：使用对象的字面语法“{}”创建的一个简单对象。这个新创建的对象从Object.prototype继承，如果在一对大括弧中未声明任何属性，则该对象没有任何自定义属性。

动态添加属性：对在声明对象时不存在的属性(如：自定义对象的属性)直接赋值的操作。

Method(s)属性，用于规定如何发送表单数据。

Event(s)属性，代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

created事件，在空间创造句柄时发生。

ready事件，当DOM已经加载，并且页面(包括图像)已经完全呈现时，会发生ready事件。

实施例1

根据本发明实施例，提供了一种添加组件属性的方法的实施例，需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

图1是根据本发明实施例的添加组件属性的方法的流程图，如图1所示，该方法包括如下步骤：

步骤S102，给组件设置一个初始自定义对象作为属性参数。

具体的，上述组件可以是vue组件，上述属性参数为可以通过与DOM界面绑定以在DOM界面显示对应的内容的参数。

步骤S104，给初始自定义对象添加一个数据属性，并给数据属性赋予一个第一自定义对象。

具体的，初始自定义对象通过数据属性绑定了第一自定义对象。

步骤S106，根据第一自定义对象获取自定义属性。

具体的，上述自定义属性即为待添加属性，该自定义属性为没有赋值的属性。

步骤S108，给初始自定义对象添加方法和/或函数属性，并给方法和/或函数属性赋予一个第二自定义对象，基于第二自定义对象给自定义属性赋值。

具体的，初始自定义对象通过方法和/或函数属性绑定了第二自定义对象。且上述给自定义属性的赋值包括属性名和属性值，在上述步骤中，在第一自定义对象获取待添加的自定义属性之后，通过组件设置的方法和/或函数属性赋予的第二自定义对象为已添加的自定义属性赋值。

在一种可选的实施例中，以Vue组件为例，在Vue组件的初始自定义对象在与组件绑定的DOM界面的显示内容为一个三行的表格为例，在初始创建表格的过程中，通过初始自定义对象的数据属性的赋值对象，即上述第一自定义对象提供三个属性，分别对应于表格的三行，通过与表格的三行对应的三个属性进行赋值来在DOM界面显示一个三行的表格，由于某些原因需要将表格增加一行，变为四行的表格，但直接在第一自定义对象中直接增加第四行的属性参数，DOM界面是无法做出对应的响应的，因此可以通过第一自定义对象获取待添加属性后，由初始自定义对象的方法和/或函数属性的赋值对象，即上述第二自定义对象来为待添加的自定义属性赋值，从而使得能够在第一自定义对象中添加新的属性参数，对应的，使得与该Vue组件绑定的DOM界面对该添加的新的属性参数做出响应，显示四行的表格。

此处需要说明的是，由于直接给初始自定义对象的数据属性的赋值对象，即第一自定义对象中添加属性参数，与该Vue组件绑定的DOM界面是不会对新添加的属性做出响应的，因此上述方案在初始自定义对象中添加方法和/或函数属性，并赋予第二自定义对象，通过第二自定义对象为第一自定义对象所获取的自定义属性进行赋值，从而使得第一自定义对象能够动态添加自定义属性，进而改变组件的属性参数，实现组件属性的动态添加。

由上可知，本申请上述步骤给组件设置一个初始自定义对象作为属性参数，给初始自定义对象添加一个数据属性，并给数据属性赋予一个第一自定义对象，根据第一自定义对象获取自定义属性，给初始自定义对象添加方法和/或函数属性，并给方法和/或函数属性赋予一个第二自定义对象，并基于第二自定义对象给自定义属性赋值。上述方案通过第二自定义对象为第一自定义对象所获取的自定义属性进行赋值，从而在第一自定义对象动态添加自定义属性后来对添加的自定义属性进行赋值，进而改变组件的属性参数，解决了有技术中，直接在目标对象中动态添加自定义对象的属性，DOM界面不随之发生变化的技术问题，实现了组件属性的动态添加。

可选的，根据本申请上述方案，步骤S106，根据第一自定义对象获取自定义属性包括：

步骤S1061，给第一自定义对象添加一个属性，并给属性赋予一个第三自定义对象，通过第三自定义对象添加自定义属性。

在上述步骤中，可以通过对第一自定义对象中的属性进行赋值来获取自定义属性，在一种可选的实施例中，可以将第一自定义对象中的属性赋予给含自定义属性的自定义对象。仍以上述通过与Vue组件绑定的DOM界面显示表格为例，上述第一自定义对象中添加的属性即为创建表格时的属性，可以定义一个包括自定义属性的第三自定义对象，并将第一自定义对象中的属性赋予第三自定义对象，从而使得第一自定义对象基于第三自定义对象获取到自定义属性。

可选的，根据本申请上述方案，步骤S108，给初始自定义对象添加方法和/或函数属性，并给方法和/或函数属性赋予一个第二自定义对象，并基于第二自定义对象给自定义属性赋值包括：

步骤S1081，给初始自定义对象添加第一方法和/或函数属性，并给第一方法和/或函数属性赋予一个第二自定义对象。

步骤S1083，给第二自定义对象添加第二方法和/或函数属性，并给第二方法和/或函数属性赋予一个方法和/或函数，方法和/或函数中给自定义属性赋予一个第四自定义对象，通过第四自定义对象给自定义属性赋值。

在上述步骤中，上述第四自定义对象通过第二方法和/或函数为第一自定义对象获取的自定义属性进行赋值。第二自定义对象通过上述方法和/或函数绑定了第四自定义对象。

此处需要说明的是，为初始自定义对象添加的和第二自定义对象添加的可以为方法属性或函数属性，也可以同时添加方法属性和函数属性，其中，方法属性可以包括：methods、events等，函数属性可以包括：created、ready等。

可选的，根据本申请上述方案，自定义属性包括属性名和属性值。

可选的，根据本申请上述方案，给自定义属性赋值包括给自定义属性赋予属性名和属性值。

下面，对于上述代码的执行流程进行解释：

1、引入Vue.js库文件

2、创建Vue组件，具体的，该Vue组件即为上述实施例中的待处理组件。

3、给创建的Vue组件提供一个自定义对象作为参数(即初始自定义对象，也即上述代码中的A)。

4、在对象A中，提供data属性，给该属性赋予另外一个自定义对象(即第一自定义对象，也即上述代码中的B)，具体的，上述data属性即为数据属性。

5、在对象B中，提供一个属性(假设属性名为prop1)，并赋予一个自定义对象(即第三自定义对象)。

6、在对象A中，提供methods属性(或者events、created、ready等可以赋予方法/函数的属性都可以)，给该属性赋予一个自定义对象(即第二自定义对象，也即上述代码中的C)，在上述步骤中，methods属性即为方法属性。

7、在对象C中，提供一个method1属性，给该属性赋予一个方法(即绑定第四自定义对象的方法，也即上述代码中的方法1)。

8、在方法1中给对象B的prop1属性赋予一个新的自定义对象(即第四自定义对象)，通过该自定义对象给自定义属性赋值(假设新添加的属性名为prop2，属性值为123)。

实施例2

根据本发明实施例，提供了一种添加组件属性的装置的实施例，图2是根据本发明实施例的添加组件属性的装置的示意图，如图2所示，该装置包括：

设置模块10，用于给组件设置一个初始自定义对象作为属性参数。

具体的，上述组件可以是vue组件，上述属性参数为可以通过与DOM界面绑定以在DOM界面显示对应的内容的参数。

添加模块20，用于给初始自定义对象添加一个数据属性，并给数据属性赋予一个第一自定义对象。

获取模块30，用于根据第一自定义对象获取自定义属性。

具体的，上述自定义属性即为待添加属性，该自定义属性为没有赋值的属性。

赋值模块40，用于给初始自定义对象添加方法和/或函数属性，并给方法和/或函数属性赋予一个第二自定义对象，基于第二自定义对象给自定义属性赋值。

具体的，上述给自定义属性的赋值包括属性名和属性值，在上述步骤中，在第一自定义对象获取待添加的自定义属性之后，通过组件设置的方法和/或函数属性赋予的第二自定义对象为已添加的自定义属性赋值。

在一种可选的实施例中，以Vue组件为例，在Vue组件的初始自定义对象在与组件绑定的DOM界面的显示内容为一个三行的表格为例，在初始创建表格的过程中，通过初始自定义对象的数据属性的赋值对象，即上述第一自定义对象提供三个属性，分别对应于表格的三行，通过与表格的三行对应的三个属性进行赋值来在DOM界面显示一个三行的表格，由于某些原因需要将表格增加一行，变为四行的表格，但直接在第一自定义对象中直接增加待添加的属性，DOM界面是无法做出对应的响应的，因此可以通过第一自定义对象获取待添加属性后，由初始自定义对象的方法和/或函数属性的赋值对象，即上述第二自定义对象来为待添加的自定义属性赋值，从而使得能够在第一自定义对象中添加新的属性参数，对应的，使得与该Vue组件绑定的DOM界面对该添加的新的属性参数做出响应，显示四行的表格。

此处需要说明的是，由于直接给初始自定义对象的数据属性的赋值对象，即第一自定义对象中添加属性，与该Vue组件绑定的DOM界面是不会对新添加的属性做出响应的，因此上述方案在初始自定义对象中添加方法和/或函数属性，并赋予第二自定义对象，通过第二自定义对象为第一自定义对象所获取的自定义属性进行赋值，从而使得第一自定义对象能够动态添加自定义属性，进而改变组件的属性参数，实现组件属性的动态添加。

由上可知，本申请上述装置通过设置模块给组件设置一个初始自定义对象作为属性参数，通过添加模块给初始自定义对象添加一个数据属性，并给数据属性赋予一个第一自定义对象，通过获取模块根据第一自定义对象获取自定义属性，通过赋值模块给初始自定义对象添加方法和/或函数属性，并给方法和/或函数属性赋予一个第二自定义对象，并基于第二自定义对象给自定义属性赋值。上述方案通过第二自定义对象为第一自定义对象所获取的自定义属性进行赋值，从而在第一自定义对象动态添加自定义属性后来对添加的自定义属性进行赋值，进而改变组件的属性参数，解决了有技术中，直接在目标对象中动态添加自定义对象的属性，DOM界面不随之发生变化的技术问题，实现了组件属性的动态添加。

可选的，根据本申请上述实施例，结合图3所示，获取模块30包括：

第一添加子模块31，用于给第一自定义对象添加一个属性，并给属性赋予一个第三自定义对象，通过第三自定义对象添加自定义属性。

可选的，根据本申请上述实施例，结合图4所示，赋值模块40包括：

第二添加子模块41，用于给初始自定义对象添加第一方法和/或函数属性，并给第一方法和/或函数属性赋予一个第二自定义对象。

赋值子模块42，用于给第二自定义对象添加第二方法和/或函数属性，并给第二方法和/或函数属性赋予一个方法和/或函数，方法和/或函数中给自定义属性赋予一个第四自定义对象，通过第四自定义对象给自定义属性赋值。

可选的，根据本申请上述实施例，自定义属性包括属性名和属性值。

可选的，根据本申请上述实施例，所述给所述自定义属性赋值包括给所述自定义属性赋予属性名和属性值。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

在本发明的上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

在本申请所提供的几个实施例中，应该理解到，所揭露的技术内容，可通过其它的方式实现。其中，以上所描述的装置实施例仅仅是示意性的，例如所述单元的划分，可以为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，单元或模块的间接耦合或通信连接，可以是电性或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可为个人计算机、服务器或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。

Claims (10)

1.一种添加组件属性的方法，其特征在于，包括：

给组件设置一个初始自定义对象作为属性参数；

给所述初始自定义对象添加一个数据属性，并给所述数据属性赋予一个第一自定义对象；

根据所述第一自定义对象获取自定义属性；

给所述初始自定义对象添加方法和/或函数属性，并给所述方法和/或函数属性赋予一个第二自定义对象，基于所述第二自定义对象给所述自定义属性赋值。

2.根据权利要求1所述的方法，其特征在于，所述根据所述第一自定义对象获取自定义属性包括：

给所述第一自定义对象添加一个属性，并给所述属性赋予一个第三自定义对象，通过所述第三自定义对象添加自定义属性。

3.根据权利要求1或2所述的方法，其特征在于，所述给所述初始自定义对象添加方法和/或函数属性，并给所述方法和/或函数属性赋予一个第二自定义对象，并基于所述第二自定义对象给所述自定义属性赋值包括：

给所述初始自定义对象添加第一方法和/或函数属性，并给所述第一方法和/或函数属性赋予一个第二自定义对象；

给所述第二自定义对象添加第二方法和/或函数属性，并给所述第二方法和/或函数属性赋予一个方法和/或函数，所述方法和/或函数中给所述自定义属性赋予一个第四自定义对象，通过所述第四自定义对象给所述自定义属性赋值。

4.根据权利要求1所述的方法，其特征在于，所述自定义属性包括属性名和属性值。

5.根据权利要求4所述的方法，其特征在于，所述给所述自定义属性赋值包括给所述自定义属性赋予属性名和属性值。

6.一种添加组件属性的装置，其特征在于，包括：

设置模块，用于给组件设置一个初始自定义对象作为属性参数；

添加模块，用于给所述初始自定义对象添加一个数据属性，并给所述数据属性赋予一个第一自定义对象；

获取模块，用于根据所述第一自定义对象获取自定义属性；

赋值模块，用于给所述初始自定义对象添加方法和/或函数属性，并给所述方法和/或函数属性赋予一个第二自定义对象，基于所述第二自定义对象给所述自定义属性赋值。

7.根据权利要求6所述的装置，其特征在于，所述获取模块包括：

第一添加子模块，用于给所述第一自定义对象添加一个属性，并给所述属性赋予一个第三自定义对象，通过所述第三自定义对象添加自定义属性。

8.根据权利要求6或7所述的装置，其特征在于，所述赋值模块包括：

第二添加子模块，用于给所述初始自定义对象添加第一方法和/或函数属性，并给所述第一方法和/或函数属性赋予一个第二自定义对象；

赋值子模块，用于给所述第二自定义对象添加第二方法和/或函数属性，并给所述第二方法和/或函数属性赋予一个方法和/或函数，所述方法和/或函数中给所述自定义属性赋予一个第四自定义对象，通过所述第四自定义对象给所述自定义属性赋值。

9.根据权利要求6所述的装置，其特征在于，所述自定义属性包括属性名和属性值。

10.根据权利要求9所述的装置，其特征在于，所述给所述自定义属性赋值包括给所述自定义属性赋予属性名和属性值。