在多个文档对象模型节点挂载实例的方法与装置制造方法及图纸

技术编号:33537201 阅读:26 留言:0更新日期:2022-05-19 02:20
本发明专利技术公开了一种在多个文档对象模型节点挂载实例的方法、装置与计算设备,包括:根据根实例,构造用于数据传递和事件绑定的一个或者多个子组件;遍历根实例中的全部参数中的每个属性对象,按照数据传递和事件绑定的需求分别确定每个子组件的绑定数据部分;实例化每个子组件,并按照每个子组件的绑定数据部分将根实例和对应的子组件实例建立关联关系;将根实例挂载到根文档对象模型上,并将每个子组件实例分别挂载到与一个或者多个文档对象模型上;以及在根实例中对每个子组件的绑定数据部分的属性值进行监听,当一个或者多个属性值发生变动时,根据建立的关联关系更新对应的子组件实例中变动的属性对象的属性值。实例中变动的属性对象的属性值。实例中变动的属性对象的属性值。

【技术实现步骤摘要】
在多个文档对象模型节点挂载实例的方法与装置


[0001]本专利技术涉及网页生成技术
,尤其是一种多个文档对象模型(dom,Document Object Model)节点挂载实例的方法、装置与计算设备。

技术介绍

[0002]近些年,前端技术快速发展,vue.js(构建数据驱动的web界面的渐进式框架)+webpack(资源加载/打包工具)技术栈,已经成为很多互联网公司的首选,vue.js在使用的过程中,需要将Vue实例对象挂载到唯一的根级的dom元素上,该dom所有的子元素都由Vue实例负责渲染和托管。所以,如果需要将一个Vue实例同时挂载到多个dom元素上,相关技术中无法使用vue.js进行开发,只能采取操作原生dom操作的方式,该方式开发效率低,开发时间长,无法享受vue.js框架带来的效率提升。同时,对于团队内已经积累的vue组件和工具也无法复用,从而不得不进行重新开发。

技术实现思路

[0003]为此,本专利技术提供了一种在多个文档对象模型节点挂载实例的方法、装置与计算设备,以力图解决或者至少缓解上面存在的至少一本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种在多个文档对象模型节点挂载实例的方法,包括步骤:根据根实例,构造用于数据传递和事件绑定的一个或者多个子组件;遍历所述根实例中的全部参数中的每个属性对象,按照所述数据传递和事件绑定的需求分别确定每个子组件的绑定数据部分;实例化每个所述子组件,并按照所述每个子组件的绑定数据部分将所述根实例和对应的所述子组件实例建立关联关系;将所述根实例挂载到根文档对象模型上,并将每个所述子组件实例分别挂载到与一个或者多个文档对象模型上;以及在所述根实例中对所述每个子组件的绑定数据部分的属性值进行监听,当一个或者多个所述属性值发生变动时,根据建立的所述关联关系更新对应的所述子组件实例中变动的属性对象的属性值。2.如权利要求1所述的挂载实例的方法,其中,更新对应的所述子组件实例中变动的属性对象的属性值的步骤之后还包括:利用变动后的所述根文档对象模型和所述子文档对象模型生成对应的页面。3.如权利要求1所述的挂载实例的方法,其中,所述根文档对象模型与所述一个或者多个文档对象模型没有共同的父文档对象模型。4.如权利要求1所述的挂载实例的方法,其中,根据根实例,构造用于数据传递和事件绑定的一个或者多个子组件的步骤包括:根据根实例,使用Vue.extend方法,按照所述数据传递和事件绑定的需求,扩充对应的一个或者多个子组件。5.如权利要求1所述的挂载实例的方法,其中,遍历所述根实例中的全部参数中的每个属性对象,按照所述数据传递和事件绑定的需求分别确定每个子组件的绑定数据部分的步骤包括:对于每个子组件,按照数据传递和事件绑定的需求情况,将所述根实例中的每个属性对象进行绑定判断处理;当所述属性对象被判定为绑定时,将所述属性对象作为待绑定对象;当所述待绑定对象为常量时,将所述属性对象的内容作为绑定数据部分;当所述待绑定对象为变量时,将所述属性对象的属性作为绑定数据部分。6.如权利要求1所述的挂载实例的方法,其...

【专利技术属性】
技术研发人员:谢海峰尹召华
申请(专利权)人:北京皮尔布莱尼软件有限公司
类型:发明
国别省市:

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1