34. [组件]Vue3动态组件和状态保存

目录
文章目录隐藏
  1. 准备基本代码
  2. 创建子组件
  3. 原始切换效果
  4. 动态组件优化代码
  5. 动态组件中的状态保存
  6. 总结

本文我们主要学习一下 Vue3 中的一个重要概念—动态组件。有的小伙伴可能一听到动态组件,会觉的很难,其实它并不难懂,而且工作中用的会比较多。

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

准备基本代码

新建一个文件Demo34.html,写上最基础的代码。

<!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://media.mybj123.com/wp-content/uploads/2021/05/1621822516-d91ba54954299f0.png
小影:https://media.mybj123.com/wp-content/uploads/2021/05/1621822522-72a78f91b7c832c.png

然后编写两个组件:

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

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

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

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

原始切换效果

现在的需求是如果显示其中一个组件,另一个组件就不显示。这里我最先想到的是用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,方法中我使用了三元运算符来编写这部分内容。

<button @click="handleClick">切换佳丽</button>
methods:{
    handleClick(){
        this.showItem = this.showItem === 'xiaohong'?'xiaoying':'xiaohong';
    }
},

编写到这个步骤,可以到浏览器中查看切换效果,如果没有错误,应该可以实现教程开始前说的效果了。但是这种实现方法还是比较麻烦的,而且也不优雅,所以学一下更好的实现方法。

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

<script>
    const app = Vue.createApp({
        data(){
            return {
                showItem: 'xiaohong'
            }
        },
        methods:{
            handleClick(){
                this.showItem = this.showItem === 'xiaohong'?'xiaoying':'xiaohong';
            }
        },
        template: ` 
            <h2>欢迎光临大宝剑-请选择您的技师</h2>
            <xiaohong v-show="showItem === 'xiaohong'" />
            <xiaoying v-show="showItem === 'xiaoying'" />
            <div><button @click="handleClick">切换佳丽</button></div>
        `
    })
    app.component('xiaohong', {
        template:`<img src="https://media.mybj123.com/wp-content/uploads/2021/05/1621822516-d91ba54954299f0.png" />`
    })
    app.component('xiaoying', {
        template:`<img src="https://media.mybj123.com/wp-content/uploads/2021/05/1621822522-72a78f91b7c832c.png" />`
    })

    const vm = app.mount("#app")
</script>

动态组件优化代码

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

<component :is="showItem" />

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

<xiaohong v-show="showItem === 'xiaohong'" />
<xiaoying v-show="showItem === 'xiaoying'" />

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

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

动态组件中的状态保存

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

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

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

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

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

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

总结

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

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 34. [组件]Vue3动态组件和状态保存

2 评论

  1. 小红来的猝不及防

发表回复