[JavaScript知识库]Vue动态组件

Vue动态组件

 有一个容器 要装不同的组件  这个容器就可以理解为动态组件	

component 标签就是动态组件标签 他可以实现同一个挂载点 切换显示不同的组件 有点类似tap栏切换

 <component :is="comName"></component>

他身上有个is属性 表示当前要显示的组件名

实现点击切换组件

<template>
  <div class="department-container">
    <div class="app-container">
      <el-card>
        <!-- 具体页面结构 -->
        <h1>父组件</h1>
        <button @click="comName= 'aaa'">切换a</button> //3.点击改变comName的值
        <button @click="comName= 'bbb'">切换b</button>
        <hr>
        <component :is="comName" /> //2.让is属性等于comName变量
      </el-card>
    </div>
  </div>
</template>
<script>
import aaa from './aaa.vue' //1.引入注册两个子组件
import bbb from './bbb.vue'
export default {
  components: {
    aaa, bbb

  },
  data() {
    return {
      comName: 'aaa'
    }
  }

}
</script>

最后的效果


但是这里会有个问题 每次组件的切换都会导致组件的销毁和创建 可以使用组件缓存解决这个问题

组件缓存

keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
他有两个属性：

• include：只有名称匹配的组件会被缓存。
• exclude：任何名称匹配的组件都不会被缓存。

二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。

<template>
  <div class="department-container">
    <div class="app-container">
      <el-card>
        <!-- 具体页面结构 -->
        <h1>父组件</h1>
        <button @click="comName= 'aaa'">切换a</button> //3.点击改变comName的值
        <button @click="comName= 'bbb'">切换b</button>
        <hr>
        <keep-alive include="a,b"> // 组件缓存 a,b
        //<keep-alive :include="/a|b/"> 正则
        //<keep-alive :include="['a', 'b']" 数组
        <component :is="comName" /> //2.让is属性等于comName变量
        </keep-alive>
      </el-card>
    </div>
  </div>
</template>
<script>
import aaa from './aaa.vue' //1.引入注册两个子组件
import bbb from './bbb.vue'
export default {
  components: {
    aaa, bbb

  },
  data() {
    return {
      comName: 'aaa'
    }
  }

}
</script>

结合 <keep-alive> 的 include 或 exclude属性，我们就可以轻易的选择需要缓存的组件。