组件（6）：动态组件的动态切换父组件

时间：2023-04-02 21:44:35 HTML

组件可以通过元素为其属性绑定一个属性。该属性的值表示一个子组件，可以是对象，也可以是字符串（子组件名称）。页面绑定：在父组件component中定义：currentView:"childName|childObj"使得父组件可以通过一个方法display在一个挂载点上动态切换多个子组件。varexternal={template:'

referexternalobject

'}newVue({el:'#app-1',data:{currentView:external},methods:{switchCpt:function(){vararr=[external,'home','posts','archive']varindex=arr.indexOf(this.currentView)if(index<4){this.currentView=arr[index+1]}else{this.currentView=arr[0]}}},components:{home:{template:'

componenthome

'},posts:{template:'

componentposts

'},存档:{template:'

componentarchive

'}}})动态切换

内部保存的组件个数：{{$children.length}}

点击按钮切换不同子组件的显示。可以发现，使用$children属性时，可用组件的个数始终不超过1个。这是因为每次切换都会直接移除旧的组件。下次切换时重新渲染。如果要将所有组件都保留在内存中，则需要使用keep-alive元素。keep-alive如果将切换出的组件保留在内存中，可以保持其状态或避免重新渲染，因此需要使用keep-alive。javascript代码不变，修改html，用包围组件。

动态切换

内存中保留的组件数：{{$children.length}}

结果是渲染的组件全部保留。