Vue----动态组件

---

动态组件

1. 动态组件

动态组件指的是动态切换组件的显示与隐藏。vue 提供了一个内置的 <component>组件，专门用来实现组件的动态渲染。

① <component>是组件的占位符
② 通过 is 属性动态指定要渲染的组件名称
③<component is="要渲染的组件的名称"></component>

2. 实现动态组件渲染

<template>
  <div>
    <h1>App 组件</h1>
    <!-- 切换组件的按钮 -->
    <button @click="comName='Com_1'"> 显示组件1 </button>
    <button @click="comName='Com_2'"> 显示组件2 </button>
    <hr>
    <!-- 动态组件显示区域 -->
    <component :is="comName"></component>
  </div>
</template>

<script>
import Com_1 from './Com_1.vue'
import Com_2 from './Com_2.vue'

export default {
      
      
  name: 'App',
  data() {
      
      
    return {
      
      
      // 组件名字
      comName: ''
    }
  },
  components: {
      
      
    Com_1,
    Com_2
  }
}
</script>

<style>

</style>

<template>
  <div>
    <h3>Com_1 组件</h3>
  </div>
</template>

<script>
export default {
      
      
  name: 'Com_1'
}
</script>

<style>

</style>

<template>
  <div>
    <h3>Com_2 组件</h3>
  </div>
</template>

<script>
export default {
      
      
  name: 'Com_2'
}
</script>

<style>

</style>

3. 使用 keep-alive 保持状态

默认情况下，切换动态组件时无法保持组件的状态。此时可以使用 vue 内置的<keep-alive> 组件保持动态组件的状态。

上面三个状态对应的组件状态：

切换组件时候，会动态销毁组件和创建组件。

保持动态组件的状态

在动态组件外面加一层<keep-alive>

    <!-- 动态组件显示区域 -->
    <keep-alive>
      <component :is="comName"></component>
    </keep-alive>

<template>
  <div>
    <h1>App 组件</h1>
    <!-- 切换组件的按钮 -->
    <button @click="comName='Com_1'"> 显示组件1 </button>
    <button @click="comName='Com_2'"> 显示组件2 </button>
    <hr>
    <!-- 动态组件显示区域 -->
    <keep-alive>
      <component :is="comName"></component>
    </keep-alive>
  </div>
</template>

<script>
import Com_1 from './Com_1.vue'
import Com_2 from './Com_2.vue'

export default {
      
      
  name: 'App',
  data() {
      
      
    return {
      
      
      // 组件名字
      comName: ''
    }
  },
  components: {
      
      
    Com_1,
    Com_2
  }
}
</script>

<style>

</style>

在动态组件外面加一层<keep-alive>会将组件状态进行缓存，不会销毁组件，会动态的激活组件，保持组件的状态。