vue中内置的组件（component transition transition-group keep-alive slot）

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个事件

扫描二维码关注公众号，回复： 3060531 查看本文章

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)