动态多个组件切换

已于 2022-11-07 14:58:47 修改
阅读量133 收藏
点赞数
分类专栏： vue3.0 文章标签： vue3 动态组件切换
于 2022-11-07 14:36:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ping_lvy/article/details/127725346
版权

需求：当前为一级页面，跳多个二级，这些二级名字不同，传参相同

组件名换成component

  <component
    v-if="formPageVisible"
    :is="formComponentName"
    :bill_form_id="bill_form_id"
    :bill_id="bill_id"
    :business_type="business_type"
    :bill_type_id="bill_type_id"
    :operateflag="operateflag"
    :auditStatus="auditStatus"
    @goBack="hideFormPage"
  />

 用动态变量控制跳哪个二级

      if (row.data_type == 0) {
        formComponentName.value = 'bondRegisterForm';
      } else if (row.data_type == 1) {
        formComponentName.value = 'bondReturnForm';
      } else {
        formComponentName.value = 'bondConfiscationForm';
      }
      showFormPage(row.bill_form_id, row.bill_id, row.bill_type_id, businessType, '1', 1);

小陈同学，，
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
动态加载多个子组件
weixin_47093260的博客
05-14 629
动态加载子多个组件 应用场景: 页面分析: 页面上半部分为客户基本信息(组件),下半部分为一个tabs(组件),在tabs中的每一个tab又为一个组件. 代码展示: 客户基本信息组件↓ tabs组件↓ tabs中的tab组件↓ 在tabs组件页面引入各个tab组件 在data中声明 export default { components: { customerLog, customerRecord, customerField, OrderNew, Or
Android实现动态切换组件背景的方法
09-04
在Android开发中，动态切换组件背景是提升用户体验和个性化设置的重要功能。本篇文章将详细介绍如何在Android应用中实现这一功能，主要包括使用SharedPreferences存储用户选择、动态设置组件背景以及自定义吐司显示...
动态组件 —— 2种方式实现动态组件的切换,VUE 动态组件的应用案例分析
xueyue616的博客
04-08 2731
动态组件适用于在不同组件之间进行动态切换。我使用过2种方法来实现： （1）可以通过 Vue 的<component>元素加一个特殊的is特性来实现； （2）通过v-if来进行条件渲染，同样能实现。 下面是2种实现方法的代码： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> ...
【vue无限下级动态路由菜单】
ych_0901的博客
11-16 373
通过vue、elementplus、route实现无限下级动态菜单树应用场景：实现多级菜单列表，使功能分类更加清晰易懂。实现原理：通过递归动态注册route路由和elementplus的el-menu组件实现树形菜单。提示：以下是本篇文章正文内容，下面案例可供参考运行时动态注册路由。可以使用vite的 glob 方法实现，如果没有集成 vite，可以配合后端存储的组件路径，和前端的文件路径拼接达到动态注册路由的效果。页面刷新动态路由失效。
vue组件---动态组件之多标签页面
weixin_30851409的博客
03-27 424
首先看下效果图 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动态&异步组件</title> <style type="text/css"> ...
动态组件及tab切换高亮和多个组件间过渡
RR_chen的博客
05-11 680
实现下图效果： 动态组件 在不同组件之间进行动态切换。 通过 Vue 的 <component> 元素加一个特殊的 is attribute 来实现： <!-- 组件会在 `currentTabComponent` 改变时改变 --> <component v-bind:is="currentTabComponent"></component> 例： <div class="login-tab"> <a href="" @click=
当在不同组件之间切换的时候，有时会想保持这些组件的状态（改块内容不重新刷新），以避免反复重渲染导致的性能问题
wu13534570560的博客
04-26 1057
在某些案例中，我们希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题，我们可以用一个<keep-alive>元素将其动态组件包裹起来。 <!-- 失活的组件将会被缓存！--> <keep-alive> <component v-bind:is="currentTabComponent"></compone...
多按钮切换开关组件
05-27
1. **按钮的创建与布局**：在自定义的View类中，我们需要动态地创建并添加多个Button作为子视图。每个Button都应该有明确的标识（如文字或图标），并且可以通过触摸事件来触发状态切换。 2. **状态管理**：为了跟踪...
一个web切换组件
05-09
综上所述，这个"Web切换组件"项目涉及到了前端开发中的HTML布局、CSS样式设计、JavaScript交互实现等多个关键知识点，通过分析和学习这个组件，开发者可以提升自己的前端技能，更好地理解和构建动态、交互性强的Web...
spring boot动态切换多数据源
12-08
- `DataSourceConfig`：这里会创建多个`DataSource`实例，例如`primaryDataSource`和`secondaryDataSource`，并可能使用`@ConfigurationProperties`进行属性绑定。 - `DynamicDataSourceRouter`：通常会有一个`Map...
Android组件TabHost实现页面中多个选项卡切换效果
09-02
在Android开发中，TabHost是一个非常重要的组件，用于在同一个界面上实现多个选项卡的切换效果，从而提供分页浏览的用户体验。本文将详细介绍如何利用TabHost组件在Android应用中创建并管理多个选项卡。 首先，我们...
pi_heif-0.17.0-cp310-cp310-manylinux_2_17_aarch64.whl
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
Numper基础（一）
07-27
Numper基础（一）
C语言写的潮流计算大作业代码.zip
07-27
c写的潮流计算大作业代码.zipc写的潮流计算大作业代码.zipc写的潮流计算大作业代码.zip
关于大模型的教程、调用和使用技巧的资源，帮助更多人高效地认知和使用大模型.docx
07-27
大模型（Large Models），尤其是指预训练的大规模语言模型，在自然语言处理（NLP）、计算机视觉（CV）等领域取得了显著的进步。以下是一些关于大模型的教程、调用和使用技巧的资源，帮助更多人高效地认知和使用大模型： 1. 大模型教程资源 官方文档： 大多数大型模型都会在其官方网站或GitHub页面上发布详细的文档，包括模型介绍、安装指南、使用示例等。 例如，Hugging Face的Transformers库提供了丰富的文档和教程。 在线课程： Coursera、edX等在线教育平台上提供了关于大模型的课程。 例如，斯坦福大学的NLP课程通常会涵盖最新的大模型技术。 博客文章： Medium、Towards Data Science等平台上有很多关于大模型的文章，这些文章通常由专业人士撰写，包含实战经验和技巧。 视频教程： B站（bilibili.com）和YouTube上有很多关于大模型的教程视频，适合初学者入门。 2. 调用API和使用技巧 Hugging Face Transformers： 提供了多种预训练模型的加载和调用方式。 Hugging Face文档 是一个非常
pi_heif-0.17.0-cp39-cp39-macosx_14_0_arm64.whl
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
微麦电影购票小程序，分为三部分-小程序端-商家（影院）后台与官方后台.zip
07-27
微麦电影购票小程序，分为三部分-小程序端-商家（影院）后台与官方后台.zip
[毕设]酒店管理系统PPT与源码展示.zip
07-27
[毕设]酒店管理系统PPT与源码展示
企业数字化运营管理总体规划方案
最新发布
07-27
本资料围绕总体信息化规划方案、智慧运营系统建设规划方案、阶段性建设方案等方面阐述企业数字化运营管理总体规划方案。
vuetab页动态多个组件
07-29
- *1* *3* [vue 实现tab切换动态加载不同的组件](https://blog.csdn.net/yshusencsdn/article/details/102718007)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值