【Vue 自学笔记】动态组件、组件缓存

情景假设

切换页面我们可以通过路由去实现，那如果是切换组件呢？
使用路由，页面 url 是会改变的；但是切换组件并不需要url的改变。
什么东西可以实现这样的功能呢？——动态组件。
从名字可知，这是一个可以变化的组件。

动态组件

在切换页面时，我们通过使用router-view来进行路由并渲染相应页面，那组件该如何动态渲染呢？——<component>标签。

组件缓存

在切换组件的时候，想保存当前组件的数据，该怎么办？——用组件缓存<keep-alive>。

实操

1. 先创建两个组件component1 和 component2，用于动态组件的切换。
   component1

   <script setup>
   </script>
   
   <template>
     <span>这是 component1</span>
     <input>
   </template>
   

   component2

   <script setup>
   </script>
   
   <template>
     <span>这是 component2</span>
   </template>
   

2. 使用<component>进行组件切换：

   通过点击 button 实现组件切换：

   <template>
     <button @click="onChangeComponent('component1')"> 组件 1 </button>
     <button @click="onChangeComponent('component2')"> 组件 2 </button>
     <keep-alive>
       <component :is="compoments[cur_component]" />
     </keep-alive>
   </template>
   <script setup>
   import {ref} from "vue";
   import component1 from '@/components/component1.vue'
   import component2 from '@/components/component2.vue'
   var cur_component = ref('component1')
   const compoments = {
     component1,
     component2
   }
   function onChangeComponent(component_name){
     cur_component.value = component_name
   }
   </script>
   

   这个代码并不复杂，主要注意组件的导入、:is指定组件事件，以及修改响应式对象，否则点击不会生效。

3. 结果
   
   随便在 input 写点：
   
   切换到组件 2：
   
   再切回来，数据依旧：