1.场景是点击左边tree的节点,tabs可以动态切换
<el-tabs v-model="activeName" @tab-click="handleClick" >
<el-tab-pane
v-for="item in ComponentArr"
:key="item.key"
:label="item.label"
:name="item.name"
>
<keep-alive>
<!-- v-if="activeName === item.name" -->
<component
:is="item.components"
v-if="activeName === item.name"
:ref="item.name"
@hook:created="myCreated"
@seach="seach"
@reset="reset"
/>
</keep-alive>
</el-tab-pane>
</el-tabs>
v-if用于根据条件判断是否渲染指定的元素或组件,里的条件是"activeName === item.name",即当组件的name属性值与当前激活的标签页名称(activeName)相同时,才渲染该组件。而v-bind(:)用于动态绑定属性值,这里的属性是"is",它指定了要渲染的组件类型,即item.components,表示渲染当前标签页对应的组件。
- 首先,它检查
datatype
是否包含数字5。如果包含,则执行以下操作: - 然后,它将一个新的对象添加到
ComponentArr
数组
2.动态导入组件可以这么写
loading
是一个Vue组件的属性,它表示一个组件是否处于加载状态。当组件正在加载数据时,它会显示一个加载指示器。
delay
是一个Vue组件的属性,它表示加载指示器在组件加载完成后延迟显示的时间。这个属性可以用来控制加载指示器的显示和隐藏,从而实现动画效果。例如,当组件加载完成时,加载指示器会先隐藏一段时间,然后再显示,这样可以增加视觉上的延迟效果