vue动态组件is

亦凉 2023-02-28 15:15 28阅读 0赞

在一个多标签的界面中使用 is attribute 来切换不同的组件
compOne.vue

  1. <template>
  2.   <div>组件1</div>
  3. </template>

compTwo.vue

  1. <template>
  2.   <div>组件2</div>
  3. </template>

exchange.vue

  1. <template>
  2.   <div>
  3.     <el-button @click.native="changeComponent">切换</el-button>
  4.     <component :is="currentTabComponent"></component>
  5.   </div>
  6. </template>
  8. <script>
  9. import compOne from './compOne'
  10. import compTwo from './compTwo'
  11. export default { 
  12.   name: 'exchange',
  13.   data() { 
  14.     return { 
  15.       currentTabComponent: 'compOne'
  16.     }
  17.   },
  18.   components: { 
  19.     compOne,
  20.     compTwo,
  21.   },
  22.   methods: { 
  23.     changeComponent() { 
  24.       if (this.currentTabComponent === 'compOne') { 
  25.         this.currentTabComponent = 'compTwo'
  26.       } else { 
  27.         this.currentTabComponent = 'compOne'
  28.       }
  29.     }
  30.   }
  31. }
  32. </script>

在这里插入图片描述

发表评论

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

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

相关阅读

    相关 Vue 动态组件

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

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

    相关 Vue动态组件

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

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