Vue - 第五天 动态组件& 插槽& 自定义指令

一、动态组件

1.什么是动态组件

动态组件是指在应用程序运行时动态加载和卸载的组件。通常，组件在应用程序启动时就已经加载了，但是在某些情况下，我们可能需要动态地加载组件，例如当某些组件只有在特定条件下才需要使用时。

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

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

<template>
	
	<component :is="comName">component>
	
	
	 <button @click="comName= 'Left'">展示左组件button>
     <button @click="comName= 'Right'">展示右组件button>
template>

<script>
// 引入子组件
import Left from './components/Left.vue';
import Right from './components/Right.vue';
export default {
     
  // 根组件的数据
  data() {
     
    return {
     
      comName: '', // 记录当前显示的子组件名称
    }
  },
  // 引入子组件
  components: {
     
    Left,
    Right
  }
}
script>

3.使用 keep-alive 保持状态

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

 
      <KeepAlive>
        <component :is="currentComponent">component>
      KeepAlive>

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

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

5. keep-alive 的 include 属性

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

<KeepAlive include="MyLeft,MyRight">
        <component :is="comName">component>
 KeepAlive>

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

6.动态展示左右组件

最终实现效果，在展示右组件时，左组件被缓存，计数器数据得到保存。