当前位置: 首页 > Web前端 > HTML

组件(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}}
结果是渲染的组件全部保留。