Vue----动态组件

2023-08-05 73

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 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>