vue弹窗如何嵌入其它vue页面_办公生活

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

创始人

2024-04-06 21:35:00

文章目录

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

说明

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

在这里插入图片描述

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

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

父页面

父页面通过弹框并将子页面通过引入组件的方式包裹在弹框内，通过: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 钩子```

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：ESIM：Enhanced LSTM for Natural Language Inference

下一篇：Linux下动静态库的制作与使用

热门资讯

我喜欢你韩语怎么说 sikid...

埃菲尔铁塔在哪中国仿建埃菲尔... 2019年4月26日，广西南宁市，街头惊现一座巨型山寨版埃菲尔铁塔，高约20米，白色塔身，造型逼真，...

苗族的传统节日贵州苗族节日有... 【岜沙苗族芦笙节】岜沙，苗语叫“分送”，距从江县城7.5公里，是世界上最崇拜树木并以树为神的枪手部落...

北京的名胜古迹北京最著名的景... 北京从元代开始，逐渐走上帝国首都的道路，先是成为大辽朝五大首都之一的南京城，随着金灭辽，金代从海陵王...

长白山自助游攻略吉林长白山游... 昨天介绍了西坡的景点详细请看链接：一个人的旅行，据说能看到长白山天池全凭运气，您的运气如何？今日介绍...

应用未安装解决办法平板应用未... ---IT小技术，每天Get一个小技能！一、前言描述苹果IPad2居然不能安装怎么办？与此IPad不...

脚上的穴位图脚面经络图对应的... 人体穴位作用图解大全更清晰直观的标注了各个人体穴位的作用，包括头部穴位图、胸部穴位图、背部穴位图、胳...

猫咪吃了塑料袋怎么办猫咪误食... 你知道吗？塑料袋放久了会长猫哦！要说猫咪对塑料袋的喜爱程度完完全全可以媲美纸箱家里只要一有塑料袋的响...

demo什么意思 demo版本... 618快到了，各位的小金库大概也在准备开闸放水了吧。没有小金库的，也该向老婆撒娇卖萌服个软了，一切只...

世界上最漂亮的人世界上最漂亮... 此前在某网上，选出了全球265万颜值姣好的女性。从这些数量庞大的女性群体中，人们投票选出了心目中最美...