Vue3 动态组件标签和:is 的用法

nii • 2022-10-20 11:15 • IT技术分享 • 阅读 632

当使用 <component :is="..."> 来在多个组件间作切换时，被切换掉的组件会被卸载。如果想让组件一直存活需要使用<KeepAlive> 组件。

传给 :is 的值可以是以下几种：

被注册的组件名
导入的组件对象

如果使用选项式API ， :is的值可以是字符串

下面请看我用组合式API 实现的一个小例子：

<script setup>
import HelloWorld from '../components/HelloWorld.vue';
import HelloVue from '../components/HelloVue.vue'
import { ref } from 'vue'
let curComponent = ref(true) 
const change = () => {
  curComponent.value = !curComponent.value
}
</script>

<template>
  <main>
    
    <button @click="change">切换组件</button>
    
    <!-- <KeepAlive> -->
    <component :is="curComponent ? HelloWorld : HelloVue"></component>
    <!-- </KeepAlive> -->
    
  </main>
</template>

<!-- HelloWorld.vue -->
<script>
export default {
    unmounted(){
        console.log("HelloWorld Unmounted")
    }
}
</script>
<template>
    <h1>HelloWorld.vue</h1>
</template>

如果不使用<KeepAlive>，每次切换组件，都将卸载之前的组件。