vue-api-内置组件

component 动态组件

 <!-- 详情：
    渲染一个 "元组件" 为动态组件。 依 is 的值 来决定某个组件来渲染 --> 

<template>
    <div>
        <component :is="views" :props="data" @event='event'></component>   
    </div>
</template>

<script>
import childrenA from "./childrenA"
import childrenB from "./childrenB"
export default {
    data () {
        return {
            views: childrenA
        }
    }
}
</script>

keep-alive 缓存组件

<!-- 详情：
  <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们
  当组件在 <keep-alive> 内被切换
  它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。--> 

<template>
    <!-- 基本使用方法 -->
    <keep-alive>
        <component :is="views"></component>
    </keep-alive>

    <!-- 和 动画组件一起使用  <transition> -->

    <transition>
        <keep-alive>
            <component :is="views"></component>
        </keep-alive>
    </transition>
</template>

slot 插槽

<!-- 详情：
    <slot> 元素作为组件模板之中的内容分发插槽。<slot> 元素自身将被替换。
-->
<!--
 Props: 
    name - String 用于命名插槽。
-->
<template>
    <!-- 子组件 -->
    <div>
        <h1>插槽</h1>

        <slot name="main"></slot>
    </div>
</template>

<template>
    <!-- 父组件 -->
    <div>
        <children-a>
            <h2 slot='main'>我是插槽部门数据！！！</h2>      
        </children-a>    
    </div> 
</template>