动态组件及渲染

1. 什么是动态组件

动态组件指的是动态切换组件的显示与隐藏。

2. 如何实现动态组件渲染

vue 提供了一个内置的<component>组件，专门用来实现动态组件的渲染。示例代码如下

件指的是动态切换组件的显示与隐藏。

data(){
	//1.当前要渲染的组件名称
  return{ comName:"Left" }
}
// 2.通过is属性，动态指定要渲染的组件
<compoent :is="comName"></component>

//3.点击按钮，动态切换组件的名称
<button @click="comName = 'Left'">展示 Left 组件</button>
<button @click="comName = 'Right'">展示Right组件</button>

 这里要注意的是Left和Right指的是组件名，不区分大小写，而后面讲解的keep-alive里面需要写的是组件里面定义好的name名字，

3. 使用 keep-alive 保持状态

默认情况下，切换动态组件时无法保持组件的状态。此时可以使用 vue 内置的 组件保持动态组 件的状态。示例代码如下：

<keep-alive>
	<component :is="comName"></component>
</keep-alive>

4. keep-alive 对应的生命周期函数

当组件被缓存时，会自动触发组件的 deactivated 生命周期函数。

当组件被激活时，会自动触发组件的 activated 生命周期函数。

export default{
	created(){console.log('组件被创建了')},
  destoryed(){console.log('组件被销毁')},
  activated(){console.log('Left 组件被激活')},
  deactivated(){console.log('Left 组件被缓存')}
}

5.keep-alive 的 include 属性

include 属性用来指定：只有名称匹配的组件会被缓存。多个组件名之间使用英文的逗号分隔 ：

<keep-alive include='MyLeft,MyRight'>
	<component :is='comName'></component>
</keep-alive>

注意：1.动态组件就是来动态的显示和隐藏组件，默认情况下隐藏就是在生命周期李的组件的销毁

而一开始就是默认组件的创建

           2.而用keep-alive标签包裹就能够保持组件不被销毁，即将组件缓存起来，再次调用组件时即为激活组件

           3.当组件被缓存是就会自动调用<kepp-alive>的 deactivated 生命周期函数，当组件被激活时就会自动调用<kepp-alive>的activated 生命周期函数

           4.当需要指定的组件被缓存时需要在<keep-alive>里面添加include属性，当然如果需要指定的组件不被缓存则可以添加unclude