vue 动态组件、异步组件

最新推荐文章于 2024-06-02 21:25:21 发布

原创

最新推荐文章于 2024-06-02 21:25:21 发布 · 640 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

文章介绍了Vue中如何使用动态组件实现组件的隐藏和显示，升级版中引入了`<keep-alive>`缓存组件状态，以及如何使用异步组件（如`defineAsyncComponent`）进行延迟加载。

vue 在使用组件时，大部分都在使用同步组件和动态组件，少数部分使用异步组件。

1. 动态组件普通做法
背景：一个组件显示，另外一个组件隐藏，反之。


<script>

    // 创建 vue实例
   const app = Vue.createApp({
   
   

    data() {
   
   
        return {
   
   
            currentItem: 'input-item'
        }
    },

    methods:{
   
   
        handleClick() {
   
   
            if (this.currentItem === 'input-item') {
   
   
                this.currentItem =  'common-item'
            } else {
   
   
                this.currentItem =  'input-item'
            }
        }
    },

    // 动态组件
    template:  `
    <input-item v-show=" currentItem === 'input-item' "/>
    <common-item v-show=" currentItem === 'common-item' "/>
    <button @click=</