Vue中内置的组件有以下几种:
1)component
2)transition
3)transition-group
4)keep-alive
5)slot
1)component组件:有两个属性---is inline-template
渲染一个‘元组件’为动态组件,按照'is'特性的值来渲染成那个组件
<!-- 动态组件由 vm 实例的属性值 `componentId` 控制 --> <component :is="componentId"></component> <!-- 也能够渲染注册过的组件或 prop 传入的组件 --> <component :is="$options.components.child"></component>
2)transition组件:为组件的载入和切换提供动画效果,具有非常强的可定制性,支持16个属性和12个事件
https://blog.csdn.net/qq_39894133/article/details/79513609()
3)transition-group:作为多个元素/组件的过渡效果
4)keep-alive:包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们
加上这个标签,切换时把前一个缓存起来,在回去点击切换,只是改变缓存中内容,不会重新构建vue实例产生新的DOM
调试时,切换后 标签会有颜色变化,表示原来的标签只是内容变化而已,如果不加这个标签, 切换标签没有颜色变化,表示时重新渲染的
<keep-alive>
<!-- <transition name="fade" mode="out-in"> -->
<component
v-bind:is="currentTabComponent"
class="tab"
></component>
<!-- </transition> -->
</keep-alive>
5)slot:作为组件模板之中的内容分发插槽,slot元素自身将被替换
详情请看官网API:点击打开链接(https://cn.vuejs.org/v2/api/#keep-alive)