Vue内置的组件

整体上总结Vue的5种内置组件，具体内容和用法，可继续深入学习和探索。

一、component

Props：

is - string | ComponentDefinition | ComponentConstructor

inline-template - boolean

渲染一个“元组件”为动态组件。依 is 的值，来决定哪个组件被渲染。

在一个多标签的界面中使用 is attribute 来切换不同的组件：

<component v-bind:is="currentTabComponent"></component>

当不断切换想要缓存的时候，可以结合keep-alive使用。

<!-- 失活的组件将会被缓存！-->
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

动态组件

二、transition

< transition> 元素作为单个元素/组件的过渡效果。

< transition> 只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在可被检查的组件层级中。

深入学习Vue 过渡 & 动画

三、transition-group

< transition-group> 元素作为多个元素/组件的过渡效果。< transition-group> 渲染一个真实的 DOM 元素。默认渲染 span，可以通过 tag attribute 配置哪个元素应该被渲染。

注意，每个 transition-group 的子节点必须有独立的 key，动画才能正常工作

<transition-group tag="ul" name="slide">
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</transition-group>

四、keep-alive

单独详细讲解

五、slot

Props：

name - string，用于命名插槽。

Usage：

< slot> 元素作为组件模板之中的内容分发插槽。< slot> 元素自身将被替换。

学习参考：插槽

参考资料：Vue API