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

当使用 <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>,每次切换组件,都将卸载之前的组件。

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

版权声明:本文为NII.CN的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://nii.cn/4150.html 发布者:nii

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
nii的头像nii
上一篇 2022-10-19 17:10
下一篇 2022-10-29 10:53

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

联系我们

邮件:83390286[AT]QQ.COM

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信