Vue动态组件

Vue动态组件

一、什么是动态组件？

答：动态组件指的是动态切换组件的显示和隐藏。

二、如何实现动态组件渲染？

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

  <div class="app-container">
    <button @click="comName = 'Left'">Left</button>
    <button @click="comName = 'Right'">Right</button>
    <div class="box">
      <!-- 1.使用componet组件占位符 -->
      <!-- 2.通过is 属性的值表示要渲染哪个组件 -->
      <component :is="comName"></component>
    </div>
  </div>
</template>
<script>
import Left from '@/components/Left'
import Right from '@/components/Right'
export default {
  components:{
    Left,
    Right
  },
  data() {
    return {
      comName:'Left'
    }
  },

三、keep-alive组件缓存

1.keep-alive有什么作用？

component方法的好处在于组件之间的切换自如，但是切换的同时也会销毁上一个组件，每一次切换都会销毁和重新渲染，这消耗了很大的性能。我们可以通过使用来帮助我们对组件进行缓存。

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

（1）activated()：当组件被激活时会自动触发组件的activated生命周期函数。

（2）deactivated()：当组件被缓存时会自动触发组件的deactivated生命周期函数。

3.如何使用keep-alive？

代码如下：

    <button @click="comName = 'Left'">Left</button>
    <button @click="comName = 'Right'">Right</button>
    <div class="box">
      <!-- 1.使用componet组件占位符 -->
      <!-- 2.通过is 属性的值表示要渲染哪个组件 -->
      <keep-alive>
        <component :is="comName"></component>
      </keep-alive>
    </div>
  </div>
</template>
<script>
import Left from '@/components/Left'
import Right from '@/components/Right'
export default {
  components:{
    Left,
    Right
  },
  data() {
    return {
      comName:'Left'
    }

4. keep-alive的两个属性

   （1）include属性：可以指定哪个组件是缓存的。
   （2）exclude属性：可以指定哪个组件是不缓存的。

5. keep-alive属性的使用方法

   （1）include的使用：

     <--include="指定需要缓存的组件名"此处的Left和Right是组件名。
     组件名之间要用英文“,”分割哦。
     -->
     <keep-alive include="Left,Right">
       <component :is="comName"></component>
     </keep-alive>
   

   （2）exclude的使用：

     <--exclude="指定不需要的组件名"此处的Left和Right是组件名。
     组件名之间要用英文“,”分割哦。
     -->
     <keep-alive exclude="Left,Right">
       <component :is="comName"></component>
     </keep-alive>
   

6. keep-alive组件缓存的注意事项：

   （1）keep-alive默认情况下是所有组件都被缓存的。

   （2）include和exclude不可以同时使用！