problem description
problems always arise from requirements. So let me first describe my business scenario:
around the layout of the page, the left side is a list of Tabs tabs, the right side is a tree, click on each item of tab, the check status of the right tree changes. The tab item on the left can be dynamically added and deleted. Special note, the tree on the right is the same tree, but the check status is not the same.
Tabs tabtab
2listTabList()TreeList().
:
TabListtab,TreeListtabv-showdomtabdomv-showv-ifdomelement uikeep-alivedomkeep-alive
:
2
1.isDel
2.isDel=truetree
treesfthis.$vnode.parent.componentInstance.cache;keep-aliveincludeexcludeincludeexclude2name,
treeis
as a special note here, I am using a single-file component, and the approach of a non-single-file component will not be discussed here (for example, this is not talking about https://jsfiddle.net/jingkaiz.)
.you can see from the screenshot that the available component names and corresponding components have been registered in the components property at the beginning, so how can you dynamically add a new component to the components property in the event that the user adds tab? It"s actually a tree component, but you need to make a deep copy to make sure that the state it saves is unique to the newly created tab. But what about the name? This is the end of the train of thought. Ask God for help