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>
