34 动态组件（切换组件）保存状态input值

阳光穿透心脏的1/2处 2023-10-06 20:41 17阅读 0赞

#### \[组件\]Vue3动态组件和状态保存 ####

*  阐述
 *  准备基本代码
 *  创建子组件
 *  原始切换效果
 *  动态组件优化代码
 *  动态组件中的状态保存
 *  总结

## 阐述 ##

本文我们主要学习一下Vue3中的一个重要概念—动态组件。

有的小伙伴可能一听到动态组件，会觉的很难，其实它并不难懂，而且工作中用的会比较多。

我们现在来虚拟一个需求，我们需要为大宝剑编写一个带图片的选择技师的功能，并且可以让顾客手动切换这些技师。（这个需求其实有几种方法可以实现，但是这里我们为了学习，特意使用了动态组件来作，并不代表是最优解决方案。）

## 准备基本代码 ##

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Demo34</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
    </head>
    
    <body>
        <div id="app"></div>
    </body>
    <script>
        const app = Vue.createApp({
          
            template: ` 
                <h2>欢迎光临大宝剑-请选择您的技师</h2> 
            `
        })
    
        const vm = app.mount("#app")
    </script>

## 创建子组件 ##

现在你可以创建两个子组件，用来展示小红和小影的照片。  
先给出了课程中需要的照片地址（你也可以自己随便找一张照片来代替）

素材图片（图片地址直接可用）：

小红：https://wem.com/wp-content/uploads/2021/05/16516-d91ba54954299f0.png
    小影：https://wem.com/wp-content/uploads/2021/05/16522-72a78f91b7c832c.png

然后编写两个组件：

app.component('xiaohong', {
        template:`<img src="https://wem.com/wp-content/uploads/2021/05/16516-d91ba54954299f0.png" />`
    })
    app.component('xiaoying', {
        template:`<img src="https://wem.com/wp-content/uploads/2021/05/16522-72a78f91b7c832c.png" />`
    })

然后在父组件中直接使用这两个组件。

const app = Vue.createApp({
        template: ` 
            <h2>欢迎光临大宝剑-请选择您的技师</h2>
            <xiaohong />
            <xiaoying />
        `
    })

这时候我们可以到浏览器中查看一下结果，如果结果正常，说明我们的编写的没有错误。

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]

## 原始切换效果 ##

现在的需求是如果显示其中一个组件，另一个组件就不显示。  
这里我最先想到的是用 `v-show` 这种代码来实现。

我们先来定义一个数据项，用来控制显示那个组件，数据项叫做 `showItem` ，然后在两个子组件的位置增加 `v-show` 属性，控制最终的显示。

const app = Vue.createApp({
        data(){
            return {
                showItem: 'xiaohong'
            }
        },
        template: ` 
            <h2>欢迎光临大宝剑-请选择您的技师</h2>
            <xiaohong v-show="showItem === 'xiaohong'" />
            <xiaoying v-show="showItem === 'xiaoying'" />
        `
    })

这时候的 `showItem` 值是 `xiaohong`，所以浏览器中应该只显示 `xiaohong` 的组件。

然后再编写一个按钮，用来切换两个组件，按钮需要绑定一个方法 `handleClick`，方法中我使用了三元运算符来编写这部分内容。

编写到这个步骤，可以到浏览器中查看切换效果，如果没有错误，应该可以实现教程开始前说的效果了。

但是这种实现方法还是比较麻烦的，而且也不优雅，所以学一下更好的实现方法。

![在这里插入图片描述][75e76e387a354568b3c6207a1d3c727f.gif_pic_center]

为了照顾新学习的小伙伴，附上此时写好的代码：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Demo33</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
    </head>
    
    <body>
        <div id="app"></div>
    </body>
    <script>
        const app = Vue.createApp({
          
            data(){
          
                return {
          
                    showItem: 'xiaohong'
                }
            },
            methods:{
          
                handleClick(){
          
                    this.showItem = this.showItem === 'xiaohong'?'xiaoying':'xiaohong';
                }
            },
            template: ` 
                <h2>欢迎光临大宝剑-请选择您的技师</h2>
                <button @click="handleClick">切换佳丽</button>
                <xiaohong v-show="showItem === 'xiaohong'" />
                <xiaoying v-show="showItem === 'xiaoying'" />
            `
        })
    
        app.component('xiaohong', {
          
            template:`<img src="https://wem.com/wp-content/uploads/2021/05/1621822516-d91ba54954299f0.png" />`
        })
    
        app.component('xiaoying', {
          
            template:`<img src="https://wem.com/wp-content/uploads/2021/05/1621822522-72a78f91b7c832c.png" />`
        })
    
        const vm = app.mount("#app")
    </script>
    </html>

## 动态组件优化代码 ##

使用动态组件的编程方式，就可以省略 `v-show` 部分的代码，也可以让代码看起来更加的优雅。

有了上面这段简短的代码，就可以删除掉下面这两句代码了。

那这决代码的意思是，使用一个动态组件，最终展示那个组件，由数据项 `showItem` 决定，它的值是 `xiaohong` 就显示谢小红的照片，它的值是 `xiaoying`，就显示小影的照片。

是不是用起来非常简单和轻松。

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Demo33</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
    </head>
    
    <body>
        <div id="app"></div>
    </body>
    <script>
        const app = Vue.createApp({
          
            data(){
          
                return {
          
                    showItem: 'xiaohong'
                }
            },
            methods:{
          
                handleClick(){
          
                    this.showItem = this.showItem === 'xiaohong'?'xiaoying':'xiaohong';
                }
            },
            template: ` 
                <h2>欢迎光临大宝剑-请选择您的技师</h2>
                <button @click="handleClick">切换佳丽</button>
                <component :is="showItem" />
            `
        })
    
        app.component('xiaohong', {
          
            template:`<img src="https://wem.com/wp-content/uploads/2021/05/1621822516-d91ba54954299f0.png" />`
        })
    
        app.component('xiaoying', {
          
            template:`<img src="https://wem.com/wp-content/uploads/2021/05/1621822522-72a78f91b7c832c.png" />`
        })
    
        const vm = app.mount("#app")
    </script>
    </html>

## 动态组件中的状态保存 ##

动态组件用起来非常方便，但是它有一点小问题。  
我们现在修改一下 `xiaohong` 组件，把照片变成一个 `input` 框。

app.component('xiaohong',{
        template:`<input />`
    })

这时候你到浏览器中查看，并在输入框中输入文字，在切换组件后。  
你会发现 `input` 框中的文字是无法保存的。

为了保存 `input` 框中的文字，可以使用 `<keep-alive>` 标签，把动态组件包裹起来。

<keep-alive>
        <component :is="showItem" />
    </keep-alive>

这时候相当启用了缓存，把`input` 框的值存了起来。  
所以在使用动态组件时，经常配合 `<keep-alive>` 标签一起使用。

![在这里插入图片描述][96770e7cb7cb4a379a4dc4922e093fa4.gif_pic_center]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Demo33</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
    </head>
    
    <body>
        <div id="app"></div>
    </body>
    <script>
        const app = Vue.createApp({
          
            data(){
          
                return {
          
                    showItem: 'xiaohong'
                }
            },
            methods:{
          
                handleClick(){
          
                    this.showItem = this.showItem === 'xiaohong'?'xiaoying':'xiaohong';
                }
            },
            template: ` 
                <h2>欢迎光临大宝剑-请选择您的技师</h2>
                <button @click="handleClick">切换佳丽</button>
                <keep-alive>
                    <component :is="showItem" />
                </keep-alive>
            `
        })
    
        app.component('xiaohong',{
          
            template:`<input />`
        })
    
        app.component('xiaoying', {
          
            template:`<img src="https://media.mybj123.com/wp-content/uploads/2021/05/1621822522-72a78f91b7c832c.png" />`
        })
    
        const vm = app.mount("#app")
    </script>
    </html>

## 总结 ##

以上就是本文大家所学的主要内容了，希望你可以掌握以上两个重要知识，一个是动态组件的使用，另一个是`<keep-alive>`标签的使用。

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/b4dee73dd38048309aa611b022ff4998.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[75e76e387a354568b3c6207a1d3c727f.gif_pic_center]: https://img-blog.csdnimg.cn/75e76e387a354568b3c6207a1d3c727f.gif#pic_center
[96770e7cb7cb4a379a4dc4922e093fa4.gif_pic_center]: https://img-blog.csdnimg.cn/96770e7cb7cb4a379a4dc4922e093fa4.gif#pic_center