多个组件挂在到同一个组件上,通过参数进行动态切换
一、实现方式
<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>
标签:vue,idx,切换,组件,import,Page2,Page3,Page1 From: https://www.cnblogs.com/BillyYoung/p/17268219.html