ElementPlus动态组件图标 vue 动态显示组件

当我们需要在组件之间切换的时候，可能会想到v-if或者v-show

但是这俩个并不会保持组件的状态，比如v-if：我们每次隐藏显示切换的时候都会动态的去删除或者渲染组件，得到的组件是一个初始状态的，我们没有办法保持距离上次的状态

于是——我们可以使用动态组件

经过以上的叙述，我们不难直到什么是动态组件

它就是动态的去切换组件的显示与隐藏

目录

component组件

keep-alive-怎么保留状态？

keep-alive的一些附带功能

---

component组件

那么我们该怎么实现动态组件的渲染呢？

Vue提供了一个<component>组件，专门用来实现动态组件的渲染

<component is="要显示的组件的名称"></component>

比如我们现在有俩个子组件供component动态组件使用，我们可以通过动态修改is值来让用户决定显示哪一个组件、隐藏哪一个组件： 

<template>
  <div id="app">
    <div>App组件</div>
    <button @click="showName = 'Son'">点击显示大儿子</button>
    <button @click="showName = 'TwoSon'">点击显示二儿子</button>
    <component :is="showName"></component>
  </div>
</template>

<script>
import Son from '@/components/Son.vue'
import TwoSon from '@/components/MyTwoSon.vue'
export default {
  data(){
    return{
      showName:'Son'
    }
  },
  components:{
    Son,
    TwoSon
  }
}
</script>

 

---

keep-alive-怎么保留状态？

我们一定记得我们前言所过动态组件可以保留上次操作对应组件的状态，那么具体我们该怎么实现呢？仅仅使用component组件是不够的

此时我们需要使用到keep-alive来包裹component组件，达到缓存内部组件，而不是销毁组件

我们来做一个例子：给二儿子添加如下功能 

<template>
  <div id="MyTwoSon">
      <div>我是二儿子</div>
      <div>{{ num }}</div>
      <button @click="num++">点击+1</button>
  </div>
</template>

<script>
export default {
    data(){
        return{
            num:0
        }
    }
}
</script>

 然后我们切换到大儿子，再切换回来，发现数据没有了？？

 所以我们需要给component组件外包上keep-alive：

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

 我们可以看到这时TwoSon的数据还在，并且处于inactive缓存状态

---

keep-alive的一些附带功能

keep-alive不止如此--

我们直到Vue生命周期图

我想如果没有了解过keep-alive的话，很有可能不知道activated函数和deactivated函数

因为不使用keep-alive的话，是没有这俩个生命周期函数的

activated()函数是组件被激活的函数

deactivated()函数是组件被缓存的函数 

我们来演示一下：

activated(){
  console.log('组件被激活')
},
deactivated(){
  console.log('组件被缓存')
}

 通过组件切换触发这俩个函数：

 keep-alive还有俩个属性：

include：指定需要被缓存的组件，没有指定的则不会被缓存

exclude：指定不需要被缓存的组件，没有指定则被缓存

--值得注意的是这俩个属性是不能同时存在的--

<keep-alive include="TwoSon"></keep-alive >