第十单元(动态组件 keep-alive（钩子函数） 递归组件（name） 组件命名约定)
#课程目标
- 熟练掌握动态组件的实现
- 掌握keep-alive缓存组件，以及相应的钩子函数
- 熟练掌握递归组件，以及递归组件的实现原理
- 了解组件的命名约定
#知识点
#1.动态组件
首先得明白什么叫做动态组件，让多个组件使用同一个挂载点，并动态切换，这就是动态组件。
#1.1<component>元素
在vue中，可以通过使用保留的 <component> 元素，动态地绑定到它的 is 特性，可以实现动态组件
<template>
<div>
<button @click="change">切换页面</button>
<!--保留component元素 使用is显示相应的组件 实现动态组件-->
<component :is="currentView"></component>
</div>
</template>
<script>
import Aa from '@/components/Aa'
import Bb from '@/components/Bb'
export default {
name: 'Index',
data () {
return {
index:0,
//将组件放进数组中
arr:[Aa,Bb],
}
},
methods:{
change(){
//改变index的值，在0和1中来回切换
this.index = (++this.index)%2;
}
},
computed:{
//返回当前显示的数组
currentView(){
return this.arr[this.index];
}
}
}
</script>
#1.2动态组件的缓存（<keep-alive> ）
<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中
基础用法
<template>
<div>
<button @click="change">切换页面</button>
<!--keep-alive的使用方式，直接包在组件外面即可，里面的组件即可实现组件缓存-->
<keep-alive>
<!--保留component元素 使用is显示相应的组件 实现动态组件-->
<component :is="currentView"></component>
</keep-alive>
</div>
</template>
<script>
import Aa from '@/components/Aa'
import Bb from '@/components/Bb'
export default {
name: 'Index',
data () {
return {
index:0,
//将组件放进数组中
arr:[Aa,Bb],
}
},
methods:{
change(){
//改变index的值，在0和1中来回切换
this.index = (++this.index)%2;
}
},
computed:{
//返回当前显示的数组
currentView(){
return this.arr[this.index];
}
}
}
</script>
注意：既然是缓存，那么重新切换组件时，组件中相应的vue的生命周期函数，将不会再被触发（如：beforeCreate，created，beforeMount，mounted，beforeUpdate，updated，beforeDestroy，destroyed）
keep-alive元素中最后渲染的结果是，要求同时只有一个子元素被渲染（只能有一个根组件，和template元素类似），所以，我们也可以在keep-alive元素中写v-if判断组件的显示和隐藏：
<template>
<div>
<button @click="change">切换页面</button>
<!--keep-alive的使用方式，直接包在组件外面即可，里面的组件即可实现组件缓存-->
<keep-alive>
<Aa v-if="index==0"></Aa>
<Bb v-if="index==1"></Bb>
</keep-alive>
</div>
</template>
<script>
import Aa from '@/components/Aa'
import Bb from '@/components/Bb'
export default {
name: 'Index',
data () {
return {
index:0,
//将组件放进数组中
arr:[Aa,Bb],
}
},
methods:{
change(){
//改变index的值，在0和1中来回切换
this.index = (++this.index)%2;
}
},
components:{
Aa,Bb
}
}
}
</script>
#1.3 缓存组件中的钩子函数activated 和 deactivated
activated 和 deactivated 在 <keep-alive> 树内的所有嵌套组件中触发
activated===>这个函数是在组件被切换显示的时候，触发该函数
deactivated===>这个函数是在组件被切换隐藏的时候，触发该函数
//Aa.vue组件 当这个组件显示或者隐藏时 会触发activated或者deactivated
<template>
<div>
{{msg}}
</div>
</template>
<script>
export default {
name: 'Aa',
data () {
return {
msg:'我是Aa'
}
},
//显示时触发该函数
activated(){
console.log('a来了')
},
//隐藏时触发该函数
deactivated(){
console.log('a走了')
}
}
</script>
#1.4组件有条件地缓存 include和exclude
include和exclude属性允许组件有条件地缓存，见语义化命名，就知道前者是包含，后者则是排除。- 二者都可以用逗号分隔字符串、正则表达式或一个数组来表示 。
- 匹配首先检查组件自身的
name选项，如果name选项不可用，则匹配它的局部注册名称（父组件components选项的键值）。 - 匿名组件不能被匹配。
<!-- 逗号分隔字符串 -->
<keep-alive include="Aa">
<Aa v-if="index==0"></Aa>
<Bb v-if="index==1"></Bb>
</keep-alive>
<!-- 正则表达式 (使用 v-bind) -->
<keep-alive :include="/Aa|Bb/">
<Aa v-if="index==0"></Aa>
<Bb v-if="index==1"></Bb>
</keep-alive>
<!-- 数组 (使用 v-bind) -->
<keep-alive :include="['Aa', 'Bb']">
<Aa v-if="index==0"></Aa>
<Bb v-if="index==1"></Bb>
</keep-alive>
#2.递归组件
对于一些有规律的 dom 结构，我们可以通过递归方式来生成这个结构，那么在vue的模板中，我们能不能递归生成dom，答案是肯定的，在vue的组件中能够调用自己本身，不过它们只能通过 name 选项来做这件事。
首先为了使用递归组件需要准备一份数据，既然要用递归组件，那么对我们的数据格式肯定是需要满足递归的条件的，就像下边这样，这是一个树状的递归数据。
data () {
return {
list: [
{
name: '苹果',
cList: [
{ name: '二级苹果1' },
{
name: '二级苹果2',
cList: [
{ name: '三级苹果1', cList: [{ name: '四级苹果1' }] }
]
}
]
},
{ name: '香蕉' },
{
name: '西瓜',
cList: [{ name: '二级西瓜1' }, { name: '二级西瓜2' }]
}
]
}
}
接下来，我们就用这个树状数据，做一个简单版的树状菜单。树状菜单，也是递归组件最常用的方法之一。
首先，我们先创建一个tree组件，这个组件作为使用递归组件的父组件，我们来看下具体写法
<template>
<div>
<my-trees :list="list"></my-trees>
</div>
</template>
<script>
import myTrees from './treeMenus'
export default {
name:"Tree",
components: {
myTrees
},
data () {
return {
list: [
{
name: '苹果',
cList: [
{ name: '二级苹果1' },
{
name: '二级苹果2',
cList: [
{ name: '三级苹果1', cList: [{ name: '四级苹果1' }] }
]
}
]
},
{ name: '香蕉' },
{
name: '西瓜',
cList: [{ name: '二级西瓜1' }, { name: '二级西瓜2' }]
}
]
}
},
methods: {}
}
</script>
<my-trees />就是我们说的递归组件，当使用它时，只需要把上边我们定义好的数据通过props的方式传进去即可。
接下来，递归组件接收到了父组件传递的数据，就可以进行递归啦，我们来看下边treeMenus.vue中的实现：
<template>
<ul>
<li v-for="(item,index) in list " :key="index">
<p>{{item.name}}</p>
<tree-menus :list="item.cList"></tree-menus>
</li>
</ul>
</template>
<style>
ul{
padding-left: 20px!important;
}
</style>
<script>
export default{
name:'treeMenus',
props:{
list: Array
}
}
</script>
注意一开始所说，name属性的使用，你可以把它当作从import导入了一个组件并注册，我们在temlpate可以使用<tree-menus></tree-menus>使用子组件自身进行递归了。
#3.组件命名约定
当注册组件（或者 props）时，可以使用 kebab-case ，camelCase ，或 TitleCase 。
// 在组件定义中
components: {
// 使用 camelCase 形式注册
'kebab-cased-component': { /* ... */ },
'camelCasedComponent': { /* ... */ },
'TitleCasedComponent': { /* ... */ }
}
在 HTML 模版中，请使用 kebab-case 形式：
<!-- 在HTML模版中始终使用 kebab-case -->
<kebab-cased-component></kebab-cased-component>
<camel-cased-component></camel-cased-component>
<title-cased-component></title-cased-component>
当使用字符串模式时，可以不受 HTML 的 case-insensitive 限制。这意味实际上在模版中，你可以使用 camelCase 、 PascalCase 或者 kebab-case 来引用你的组件和 prop：
<!-- 在字符串模版中可以用任何你喜欢的方式-->
<my-component></my-component>
<myComponent></myComponent>
<MyComponent></MyComponent>
如果组件未经 slot 元素传递内容，你甚至可以在组件名后使用 / 使其自闭合：
<my-component/>
当然，这只在字符串模版中有效。因为自闭的自定义元素是无效的 HTML ，浏览器原生的解析器也无法识别它。
#授课思路
#案例和作业
使用递归组件方式完成如下图的多级菜单
