vue动态切换组件

多个组件挂在到同一个组件上，通过参数进行动态切换

一、实现方式

复制代码

<component :is="componentName"></component>

 

二、示例

复制代码

import Page1 from './Page1'
import Page2 from './Page2'
import Page3 from './Page3'

export default [
  Page1,
  Page2,
  Page3
]

复制代码

<template>
  <div>
    <el-button @click="changePage(0)">页面1</el-button>
    <el-button @click="changePage(1)">页面2</el-button>
    <el-button @click="changePage(2)">页面3</el-button>
    <component :is="componentPage[idx]"></component>
  </div>
</template>

<script>
import componentPage from './index'

export default {
  name: 'test',
  data() {
    return {
      componentPage,
      idx: 0
    }
  },
  methods: {
    changePage(idx) {
      this.idx = idx
    }
  }
}
</script>