【Vue】—动态组件

迈不过友情╰ 2022-09-11 12:22 255阅读 0赞

## 【Vue】—动态组件 ##

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

<template>
        <div>
            <div>这里使用动态组件包装</div>
            
            <div>
                <keep-alive exclude="A">
                    <component :is='curComp' />
                </keep-alive>
                <button @click="toggle">切换</button>
            </div>
    
            <div>
                <component :is='ccdd' />
                <button @click="cad">切换c和d</button>
    
            </div>
        </div>
    </template>
    
    <script>
        import A from './a';
        import B from './b';
        import C from './c';
        import D from './d';
        export default { 
            components: { 
                A,
                B,
                C,
                D
            },
            data() { 
                return { 
                    curComp: A,
                    ccdd: C
                };
    
            },
            methods: { 
                toggle() { 
                    this.curComp = this.curComp == A ? B : A;
                },
                cad() { 
                    this.ccdd = this.ccdd == C ? D : C
                }
            }
        }
    </script>
    
    <style>
    
    </style>

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/38c31e46bb514ab19c8b22a4ecb9e805.png

发表评论取消回复

表情：

评论列表（有 0 条评论，255人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue动态添加组件

【Vue】动态添加组件 [https://www.microanswer.cn/blog/9][https_www.microanswer.cn_blog_9] 超链接[

你的名字/ 2023年06月25日 10:17/ 0 赞/ 16 阅读

相关 Vue 动态组件

动态组件通过使用保留的 <component> 元素，并对其 is 特性进行动态绑定，你可以在同一个挂载点动态切换多个组件： var vm = new Vue

傷城~/ 2023年06月18日 03:54/ 0 赞/ 27 阅读

相关 vue 动态组件+全局组件+keepAlive

vue 动态组件+全局组件+keepAlive 故心故心故心故心小故冲啊 -------------------- 文章目录 vue 动态组件+全局组件+

旧城等待，/ 2022年12月25日 14:51/ 0 赞/ 317 阅读

相关 vue中动态组件

有的时候，在不同组件之间进行动态切换是非常有用的，比如在一个多标签的界面里：效果如下 ![2020102319164871.gif][] 灰色的两个按钮A,B 用于切换组

曾经终败给现在/ 2022年12月17日 07:29/ 0 赞/ 260 阅读

相关 Vue动态组件渲染

子组件封装动态切换的子组件一 <template> <div> 我是多行文本框{ { config.name }

今天药忘吃喽~/ 2022年11月10日 05:38/ 0 赞/ 270 阅读

相关【Vue】—动态组件

【Vue】—动态组件 ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiB

迈不过友情╰/ 2022年09月11日 12:22/ 0 赞/ 256 阅读

相关 VUE —— 7、组件（组件动态、全局组件、缓存）

目录 5.动态模板（1）通过条件匹配来显示（2）动态模板（3）异步组件 6.全局组件（公共组件）（1）添加一个（2）添加多个 1.执行流程

浅浅的花香味﹌/ 2022年08月31日 04:59/ 0 赞/ 369 阅读

相关 Vue动态组件

Vue动态组件 1、序言 2、实例 1、序言在页面应用程序中，经常会遇到多标签页面，在Vue.js中，可以通过动态组件来实现。组件的动态切换是通

╰+攻爆jí腚メ/ 2022年08月30日 01:56/ 0 赞/ 261 阅读

相关 vue——动态组件

通过使用保留的 `<component>` 元素，动态地绑定到它的 `is` 特性，我们让多个组件可以使用同一个挂载点，并动态切换。根据 v-bind:is="组件名" 中的组

ゞ浴缸里的玫瑰/ 2021年09月14日 12:58/ 0 赞/ 495 阅读

相关 vue 动态组件

1、引入组件,并在components中注入 2、动态组件 <component :is='x'></component> is

矫情吗；*/ 2021年07月24日 23:23/ 0 赞/ 530 阅读