vue弹窗如何嵌入其它vue页面

news2025/7/10 17:33:41

文章目录

      • 说明
      • 子组件,将要引入到弹框内的页面
      • 父页面
      • 思考
      • 组件 v-if 和 v-show 切换时生命周期钩子的执行

说明

【1】实现方式,将其他页面作为组件传入
【2】在父页面,将该组件引入到弹框内,并通过动态渲染进行切换

在这里插入图片描述

子组件,将要引入到弹框内的页面

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
    </el-form>
    <el-table v-loading="loading" :data="recordList" @selection-change="handleSelectionChange">
    </el-table>
    <pagination/>
  </div>
</template>
<script>
export default {
  name: "Record",
  props: ['userId'],
  data() {
    return {
      // 遮罩层
      loading: true,
      title: "",
      // 查询参数
      queryParams: {
        userId: null,
        userName: null
      }
    };
  },
  created() {
    this.queryParams.userId = this.userId;
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      // 执行请求后台数据
    }
  }
};
</script>

【1】构建子页面,上面是一个普通的页面,其中页面使用ElementUI作为布局框架,使用到了el-table表格和pagination分页组件
【2】组件创建即created的时候,请求后台加载数据。
【3】创建属性变量props: [‘userId’],该参数用于父子组件传值。

父页面

<template>
  <div class="app-container">
    <el-dialog :title="title" :visible.sync="userDialogVisible"  v-if="userDialogVisible"  width="800px" append-to-body>
      <!--  传递给子组件的值     -->
      <UserInfo :userId="userId"></UserInfo>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 导入需要弹框展示页面的组件
import UserInfo from '../index/user'

export default {
  name: "父页面",
  // 注册组件
  components: {UserInfo},
  data() {
    return {
      // 需要和弹框页面交互的参数
      userId: null,
      // 控制弹框是否展示标识
      userDialogVisible: false
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 展示用户列表页面 **/
    showUserInfoPage(row) {
      // 设置
      this.userDialogVisible = true;
      this.userId = row.id;
    },
    /** 关闭用户列表页面 **/
    cancel() {
      this.userDialogVisible = false;
    },
  }
};
</script>

父页面通过弹框并将子页面通过引入组件的方式包裹在弹框内,通过:visible.sync=“userDialogVisible” v-if="userDialogVisible"进行弹框的展示以及组件的创建和销毁,并且通过父子组件传参的方式切换数据。注意这里需要使用v-if以便子组件可以在create()中动态展示数据。

思考

对于类似需要根据特定参数动态展示其他组件数据的时候,我们可以通过在可以给子组件传递其他参数,在子组件watch中监听。通过子组件监听参数变量变化从而动态展切换数据。
注意子组件渲染只会执行一次created生命周期,如果非要将更改内容写在created中,就要配合 v-if 使用,将子组件用 v-if 包裹起来,每次都重新加载子组件。

组件 v-if 和 v-show 切换时生命周期钩子的执行

v-if
初始渲染
初始值为 false 组件不会渲染,生命周期钩子不会执行,v-if 的渲染是惰性的。
初始值为 true 时,组件会进行渲染,并依次执行 beforeCreate,created,beforeMount,mounted 钩子。

切换
false => true
依次执行 beforeCreate,created,beforeMount,mounted 钩子。
true => false
依次执行 beforeDestroy,destroyed 钩子。

v-show
渲染
无论初始状态,组件都会渲染,依次执行 beforeCreate,created,beforeMount,mounted 钩子,v-show 的渲染是非惰性的。

切换
对生命周期钩子无影响,切换时组件始终保持在 mounted 钩子```

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/407550.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

使用宝塔面板快速搭建web网站,并内网穿透实现公网远程访问

目录 1. 环境安装 2. 安装cpolar内网穿透 3. 内网穿透 4. 固定http地址 5. 配置二级子域名 6. 创建一个测试页面 宝塔面板简单几步搭建本地web站点&#xff0c;并做内网穿透&#xff0c;实现公网用户也可以正常远程访问&#xff0c;无需公网IP&#xff0c;无需设置路由器…

echarts入门基础教程

目录 效果图 1.下载资源 新建项目 2.引入echarts 3.准备一个呈现图表的盒子 4.初始化echarts实例对象 5.准备配置项 6.将配置项设置给echarts实例对象 7.完整代码 效果图 1.下载资源 新建项目 去官网下载echarts压缩包&#xff0c;在包里的dist文件里找到echarts.min.j…

使用vite构建Vue3组件库,发布npm包

使用vite构建Vue3组件库&#xff0c;发布npm包 在国内用vue框架开发的是非常之多的&#xff0c;使用vue开发组件封装是一个很普片的事情了&#xff0c;封装好一个组件可以在项目的任意地方去使用&#xff0c;我们还可以从npm仓库下载别人封装的组件进行使用&#xff0c;比如ele…

基于Java+Springboot+vue高校资源共享交流平台设计和实现

博主介绍&#xff1a;✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专…

【完整代码】用HTML/CSS制作一个美观的个人简介网页

【完整代码】用HTML/CSS制作一个美观的个人简介网页整体结构完整代码用HTML/CSS制作一个美观的个人简介网页——学习周记1HELLO&#xff01;大家好&#xff0c;由于《用HTML/CSS制作一个美观的个人简介网页》这篇笔记有幸被很多伙伴关注&#xff0c;于是特意去找了之前写的完整…

web前端框架——Vue的特性

目录 前言&#xff1a; 一.vue 二.特性 1.轻量级 2.数据绑定 3.指令 4.插件 三.比较Angular 、React 、Vue 框架之间的比较 1. Angular Angular的优点&#xff1a; 2. React React 的优点&#xff1a; 3.vue 3.Vue的优点&#xff1a; 前言&#xff1a; 本篇文章…

【Vue】初识Vue,Vue简介及Vue Devtools配置

目录1. Vue是什么2. Vue的特点3. Vue的引入方式4. 安装Vue Devtools5. 第一个Vue案例1. Vue是什么 关于这个问题官方给了我们答案&#xff1a; 一套用于构建用户界面的渐进式JavaScript框架 渐进式框架是指我们可以在项目中一点点来引入和使用Vue&#xff0c;而不一定需要全部…

【vue2】使用vue常见的业务流程与实现思路

&#x1f973;博 主&#xff1a;初映CY的前说(前端领域) &#x1f31e;个人信条&#xff1a;想要变成得到&#xff0c;中间还有做到&#xff01; &#x1f918;本文核心&#xff1a;vue的业务处理思路。前台数据渲染与后台的增删改查操作 【前言】当大家会点开这一篇文章…

手把手教你基于HTML、CSS搭建我的相册(下)

The sand accumulates to form a pagoda⭐ 写在前面⭐ 相册中心部分⭐ 添加照片⭐ 图片展示样式⭐ 搭建底部版权模块⭐ 写在最后⭐ 写在前面 经常有一些粉丝咨询前端该从什么开始学&#xff0c;那当然是我们的前端基础三件套开始学起&#xff0c;HTML、CSS、javaScript&#x…

Java Web 实战 15 - 计算机网络之网络编程套接字

文章目录一 . 网络编程中的基本概念1.1 网络编程1.2 客户端(client) / 服务器(server)1.3 请求(request) / 响应(response)1.4 客户端和服务器之间的交互数据1.4.1 一问一答1.4.2 多问一答1.4.3 一问多答1.4.4 多问多答二 . socket 套接字2.1 UDP 的 Socket API2.1.1 引子2.1.2…

网络安全工具大合集

还是一句话&#xff0c;功夫再高&#xff0c;也怕菜刀首先&#xff0c;恭喜你发现了宝藏。本文章集成了全网优秀的开源攻防武器项目&#xff0c;包含&#xff1a;信息收集工具&#xff08;自动化利用工具、资产发现工具、目录扫描工具、子域名收集工具、指纹识别工具、端口扫描…

为什么说网络安全是风口行业?是IT行业最后的红利?

前言 “没有网络安全就没有国家安全”。当前&#xff0c;网络安全已被提升到国家战略的高度&#xff0c;成为影响国家安全、社会稳定至关重要的因素之一。 网络安全行业特点 1、就业薪资非常高&#xff0c;涨薪快 2021年猎聘网发布网络安全行业就业薪资行业最高人均33.77万&…

2023最新高频前端面试题总结(附答案)

目录 1.vue双向数据绑定的原理&#xff1f; 2.vue的生命周期有哪些 3.v-if 和v-show有什么区别&#xff1f; 4.async await 是什么&#xff1f;它有哪些作用&#xff1f; 5、数组常用的方法&#xff1f;哪些方法会改变原数组&#xff0c;哪些不会 6.什么是原型链&#xf…

脱不下孔乙己的长衫,现代的年轻人该怎么办?

“如果我没读过书&#xff0c;我还可以做别的工作&#xff0c;可我偏偏读过书” “学历本该是我的敲门砖&#xff0c;却成了我脱不下的长衫。” 最近&#xff0c;“脱下孔乙己的长衫”在网上火了。在鲁迅的原著小说中&#xff0c;孔乙己属于知识阶级&#xff08;长衫客&#xf…

国产ChatGPT大战弱智吧效果实测!网页端小程序均已上线,人人可玩

杨净 萧箫 发自 凹非寺量子位 | 公众号 QbitAI“中国版ChatGPT首发”&#xff0c;争得不可开交&#xff0c;热闹却一直没个结果——自ChatGPT发布以来&#xff0c;目前进展最快的国内产品也仅是开启了内测&#xff0c;不知道啥时候才能玩上。结果现在有读者跟我们爆料&#xff…

Vue3+TypeScript项目报错: 找不到名称“require”。是否需要为节点安装类型定义?

Vue3TypeScript项目编写代码时报错&#xff1a;找不到名称“require”。是否需要为节点安装类型定义?请尝试使用 npm i --save-dev types/node。 描述&#xff1a;今天在开发项目时&#xff08;项目框架为Vue3TypeScript&#xff09;需要 动态引入静态资源&#xff0c;也就是…

Vue--Router--嵌套路由(children)的用法

原文网址&#xff1a;Vue--Router--嵌套路由(children)的用法_IT利刃出鞘的博客-CSDN博客 简介 说明 本文介绍Vue Router的嵌套路由的用法。 嵌套路由就是父路由里面嵌套他的子路由&#xff0c;父路由有自己的路由导航和路由容器&#xff08;router-link、router-view&#x…

ChatGPT能否取代程序员?

目录ChatGPT能否取代程序员&#xff1f;ChatGPT和程序员的工作内容和工作方式ChatGPT和程序员的共同点程序员的优势程序员的实力ChatGPT和程序员的关系结论惊喜ChatGPT能否取代程序员&#xff1f; ChatGPT是一种非常普遍的人工智能&#xff08;AI&#xff09;系统&#xff0c;…

chatGPT的49种应用场景,双AI生成二次元仙女,及各开发语言对接chatGPT参考指南

前沿 可能有人在问我&#xff0c;勇哥为什么chatGPT都被微信下架了&#xff0c;你还要写相关的chatGPT的文章呢&#xff1f;其实我们先不论微信下架的原因&#xff0c;单说chatGPT的达芬奇模型给勇哥带来的科技感早就超越了一切&#xff0c;所以勇哥依旧决定连续熬两个夜为大家…

mapbox使用教程

文章目录mapbox前期准备创建,显影,删除图层,图层样式layers-type常用类型sources-type常用类型地图创建点地图创建图片、图标地图创建文字标注&#xff08;标题&#xff09;地图创建面&#xff0c;线给指定图层添加自定义弹出框地图创建容器绘制echarts/hightcharts图表地图平滑…