首页 > 其他分享 >vue动态切换组件

vue动态切换组件

时间:2023-03-29 11:23:48浏览次数:42  
标签:vue idx 切换 组件 import Page2 Page3 Page1

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

一、实现方式

<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

相关文章

  • nginx配置vue打包npm build的静态页面
    nginx配置vue项目server{listen8081;server_name10.8.8.8;indexindex.html;root/home/www/crm/vue/dist;#SSL-STARTSSL相关配置,请勿删......
  • 思考 React Hook 和 Vue 组合式 API
    Vue组合式API优化周期函数Vue2比如mounted周期中有很多获取数据的逻辑都在这里,在updated周期中又有很多更新的逻辑在这里。在老版本的Vue3文档中讲解组合式AP......
  • 第十篇 vue - 基础 -事件处理
    监听事件我们可以使用v-on指令(简写为@)来监听DOM事件,并在事件触发时执行对应的JavaScript。用法:v-on:click="methodName"或@click="handler"事件处理器的值可......
  • 若依框架-Vue实用框架(权限控制和页面渲染)(四)
    Vue实用框架(权限控制和页面渲染)路由的组成前端token获取那一步中有一块内容,只是简单提了一下,但其实实际涉及到的内容很多: 用户信息的获取第一步的GetInfo后端接口不......
  • nvm常用命令切换node
     注意:nvm usenode版本时,要使用管理员权限打开cmd输入命令,否则报错 常用命令nvmls:列出所有已安装的node版本nvmls-remote:列出所有远程服务器的版本(官方node......
  • 第九篇 vue - 基础 - 列表渲染
    v-for我们可以使用v-for指令基于一个数组来渲染一个列表。v-for指令的值需要使用iteminitems形式的特殊语法,其中items是源数据的数组,而item是迭代项的别名dat......
  • 第八篇 vue - 基础 - 条件渲染
    v-ifv-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染<h1v-if="awesome">Vueisawesome!</h1>v-else你也可以使用v-else为v-i......
  • 第六篇 vue - 基础 - 计算属性
    基础示例模板中的表达式虽然方便,但也只能用来做简单的操作。如果在模板中写太多逻辑,会让模板变得臃肿,难以维护。比如说,我们有这样一个包含嵌套数组的对象exportdefault......
  • 第五篇 vue - 基础 - 响应式基础
    声明响应式状态选用选项式API时,会用data选项来声明组件的响应式状态。此选项的值应为返回一个对象的函数Vue将在创建新组件实例的时候调用此函数,并将函数返回的对象......
  • 第七篇 vue - 基础 - 类与样式绑定
    Class与Style绑定数据绑定的一个常见需求场景是操纵元素的CSSclass列表和内联样式。因为class和style都是attribute,我们可以和其他attribute一样使用v-bind......