Vue动态组件和异步组件

最新推荐文章于 2023-06-14 09:17:44 发布

楠溪泽岸

最新推荐文章于 2023-06-14 09:17:44 发布

阅读量683

点赞数 3

分类专栏：前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_51603875/article/details/125567624

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章目录

Vue动态组件和异步组件
一、动态组件
二、异步组件
总结

Vue动态组件和异步组件

动态组件和异步组件的简单使用

一、动态组件

使用标签<component v-bind:is="nxShow"></component>
Vue提供的动态组件的标签component
会根据:is="nxShow"中的nxShow的值自己寻找组件,
即省略了写方法的那步

在使用时，一般结合<keep-alive></keep-alive>标签，让标签切换后留有缓存
自己写的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态组件</title>
</head>
<body>
    <div id="app">

    </div>
    <script src="js/vue.js"></script>
    <script>
        const app = Vue.createApp({
            data(){
                return{
                    msg:'动态组件如下（v-show的方法展示）',
                    nxShow:'nx-btn'
                }
            },
            methods:{
                change(){
                    this.nxShow = this.nxShow==='nx-btn'?'nx-input':'nx-btn';
                },
                btnFun(item){
                    this.msg = item;
                }
            },
            template:`
                <div>
                    <h3>这里换了个写法，把内容不放在上面了div里了，放在template里,作用是一样的</h3>
                    <h3>{{msg}}</h3>
                </div>

                <div>
                    <nx-btn v-show="nxShow==='nx-btn'" v-on:btn-click="btnFun"></nx-btn>

                    <nx-input v-show="nxShow==='nx-input'"></nx-input>
                    <p>-------------</p>
                    <h3>Vue提供的动态组件的标签component
                      会根据:is="nxShow"中的nxShow的值自己寻找组件,
                      即省略了写方法的那步
                    </h3>
                    <h3>但是这样组件不会缓存，切换后内容消失得使用keep-alive标签，才能有缓存</h3>
                    <keep-alive>
                        <component v-bind:is="nxShow" v-on:btn-click="btnFun"></component>
                    </keep-alive>

                    <p>-------------</p>
                    <button v-on:click="change">切换显示</button>
                </div>

            `
        });
        /*这里复习一下全局组件的写法：1、创建实例；2、注册组件；3、挂在实例*/
        app.component('nxBtn',{
            methods: {
                btnClick(){
                    /*这里复习了子传父的方法，实现了子组件修改父组件中的内容*/
                    this.$emit('btnClick','你点击了子组件');
                }
            },
            template: `
                <button v-on:click="btnClick">点我跳转</button>
            `
        });
        app.component('nxInput',{
            template:`
                <input type="text">
            `
        });

        app.mount("#app");
    </script>
</body>
</html>

运行演示：
（分割线上是v-show实现，分割线下是vue标签实现

<keep-alive>
        <component v-bind:is="nxShow" v-on:btn-click="btnFun"></component>
 </keep-alive>

在这里插入图片描述
点击切换显示

输入后的内容，在组件切换后会保留缓存内容

二、异步组件

使用这个来写Vue.defineAsyncComponent(()=>{})

Vue.defineAsyncComponent()=>{
           return new Promise((resolve, reject)=>{
           })
         }

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>异步组件</title>
</head>
<body>
    <div id="app">
        <async-items></async-items>
    </div>
    <script src="js/vue.js"></script>
    <script>
        const app = Vue.createApp({
            data(){
                return{
                    msg:'基础模板'
                }
            }
        });
        /*
        *注册一个全局异步组件
        *使用Vue.defineAsyncComponent()=>{
        *   return new Promise((resolve, reject)=>{
        *   })
        * }
        * 来写
        *
        * Promise((resolve,reject)=>{})解决js中多个异步回调难以维护和控制问题
        * setTimeout(()=>{},3000)让前面的内容延时3秒再运行
        * */
        app.component('async-items',Vue.defineAsyncComponent(()=>{
            return new Promise((resolve, reject)=>{
                setTimeout(()=>{
                    resolve({
                        template:`
                            <div style="background-color: mediumpurple;height: 200px;width: 200px">从服务端请求的异步组件</div>
                        `
                    })
                },3000)
            })
        }));

        app.mount("#app");
    </script>
</body>
</html>