【Vue】—动态组件

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

【Vue】—动态组件

在这里插入图片描述

  1. <template>
  2.     <div>
  3.         <div>这里使用动态组件包装</div>
  4.         <!-- 能显示不同的组件 -->
  5.         <div>
  6.             <keep-alive exclude="A">
  7.                 <component :is='curComp' />
  8.             </keep-alive>
  9.             <button @click="toggle">切换</button>
  10.         </div>
  12.         <div>
  13.             <component :is='ccdd' />
  14.             <button @click="cad">切换c和d</button>
  16.         </div>
  17.     </div>
  18. </template>
  20. <script>
  21.     import A from './a';
  22.     import B from './b';
  23.     import C from './c';
  24.     import D from './d';
  25.     export default { 
  26.         components: { 
  27.             A,
  28.             B,
  29.             C,
  30.             D
  31.         },
  32.         data() { 
  33.             return { 
  34.                 curComp: A,
  35.                 ccdd: C
  36.             };
  38.         },
  39.         methods: { 
  40.             toggle() { 
  41.                 this.curComp = this.curComp == A ? B : A;
  42.             },
  43.             cad() { 
  44.                 this.ccdd = this.ccdd == C ? D : C
  45.             }
  46.         }
  47.     }
  48. </script>
  50. <style>
  52. </style>

发表评论

表情：
评论列表 （有 0 条评论，305人围观）

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

相关阅读

    相关 Vue 动态组件

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

    傷城~傷城~/ 0 赞/ 99 阅读

    相关 Vue动态组件

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

    ╰+攻爆jí腚メ╰+攻爆jí腚メ/ 0 赞/ 311 阅读