买专利卖专利找龙图腾，真高效！ 查专利查商标用IPTOP,全免费！专利年费监控用IP管家,真方便！

申请/专利权人：北京沃德博创信息科技有限公司

摘要：本发明提供一种设定Vue.js组件在父级切换时保持自身状态的方法，通过特定的组件包裹需要保持的组件，使需要保持的组件的实例提升到根节点上，并通过Teleport组件将需要保持的组件的DOM“传送”到它本应在的位置，通过实例脱离自己的父级，避免了因父级组件销毁导致自身被销毁，视觉上和组件还在原来的位置一样，无需对现有组件进行任何的修改，在使用需要保持的组件时，外层包裹一层此方案的组件即可。

主权项：1.一种设定Vue.js组件在父级切换时保持自身状态的方法，其特征在于，包括以下步骤：步骤S1、KeepMark组件采集需要提升到根节点下的组件信息，并将组件信息发送至KeepRoot组件和KeepProxy组件，所述组件信息包括组件的标识port参数，组件的原始定义component参数和组件收到的数据props参数；步骤S2、KeepRoot组件创建内部状态instanceMap，内部状态instanceMap用于存储需要提升到根节点下的组件信息；步骤S3、KeepProxy组件基于收到的port参数和component参数，从内部状态instanceMap中获取当前组件的port参数对应的组件信息对象；步骤S4、将当前组件的props参数修改为对应组件信息对象的props参数，并监测props参数变化，当props参数变化时，重复步骤S4；步骤S5、KeepProxy组件在需要提升到根节点下的组件的原始位置渲染一个空的div节点，并设置其id属性等于组件信息对象的targetDomID参数；步骤S6、KeepRoot组件遍历内部状态instanceMap，将每个组件信息对象的port参数和component参数发送至KeepRender组件；步骤S7、KeepRender组件基于收到的port参数从内部状态instanceMap中获取对应的组件信息对象；渲染Teleport组件，根据组件信息对象的targetDomIsMounted参数，判断是否将组件实例的DOM内容发送到targetDomID参数指向的空div内，若是，则设置Teleport组件的to参数为目标节点，进行下一步，若否，则设置Teleport组件的to参数为body，进行下一步；步骤S8、根据组件信息对象的component参数渲染根节点下的真实组件，将组件信息对象中的props参数修改为根节点下的真实组件的props参数。

全文数据：

权利要求：

百度查询： 北京沃德博创信息科技有限公司 一种设定Vue.js组件在父级切换时保持自身状态的方法