当前位置: 首页 > news >正文

018、钩子函数 mounted和beforeDestroy、父组件向子组件传递参数 props 的使用

文章目录

  • 1、mounted 和 beforeDestroy
    • 1.1、mounted
    • 1.2、beforeDestroy
  • 2、父组件向子组件传递参数 props
    • 2.1、子组件定义
    • 2.2、父组件调用子组件并传参
  • 3、完整例子
    • 3.1、父组件 Tags.vue
    • 3.2、子组件 TagsMenu.vue
    • 3.3、效果图

1、mounted 和 beforeDestroy

1.1、mounted

mounted() 钩子函数在组件被挂载到 DOM 后调用。代码 document.addEventListener(“click”, this.closeMenu) 在组件挂载后,为整个文档添加了一个点击事件监听器,当用户在文档任何地方点击时,都会触发 this.closeMenu 方法。

<script>export default {mounted() {//动作},

1.2、beforeDestroy

beforeDestroy() 钩子函数在组件被销毁之前调用。代码 document.removeEventListener(“click”, this.closeMenu) 在组件销毁之前,移除之前添加的点击事件监听器,避免组件销毁后仍然存在监听器,导致潜在的错误或内存泄漏。

 <script>export default {beforeDestroy() {//动作},

2、父组件向子组件传递参数 props

2.1、子组件定义

<script>export default {props: ["clientX", "clientY", "clickIndex","tagsLength"],//其余内容略}

2.2、父组件调用子组件并传参

<template>
//其余略
<TagsMenu v-show="isShowTagsMenu" :clientX="clientX" :clientY="clientY" :clickIndex="clickIndex":tagsLength="tags.length" />//其余略
</template>
<script>import TagsMenu from './TagsMenu.vue';//其余略

3、完整例子

3.1、父组件 Tags.vue

<template><div class="tags"><!-- .native 用法:在 Vue.js 中,.native 修饰符用于监听原生 DOM 事件,而不是 Vue 组件的自定义事件。例如,@contextmenu.native="rightClick($event)".prevent 阻止浏览器默认行为表示你希望监听原生的 contextmenu 事件(通常是右键点击),而不是 Vue 组件中可能定义的 contextmenu 事件。这在你想要直接处理 DOM 事件时非常有用,尤其是当组件内部没有提供相应的事件时。 --><el-tag size="medium" :closable="index>0" v-for="item,index in tags" :key="item.path":effect="item.title==$route.name?'dark':'plain'" @click="goTo(item.path)" @close="close(index)":disable-transitions="true" @contextmenu.native.prevent="rightClick($event,index)"><i class="cir" v-show="item.title==$route.name"></i>{{item.title}}</el-tag><TagsMenu v-show="isShowTagsMenu" :clientX="clientX" :clientY="clientY" :clickIndex="clickIndex":tagsLength="tags.length" /></div>
</template><script>import TagsMenu from './TagsMenu.vue';export default {components: {TagsMenu},data() {return {tags: [{title: "layout",path: "/layout",isActive: true,}],isShowTagsMenu: false,clientX: 0,clientY: 0,clickIndex: 0,}},mounted() {document.addEventListener("click", this.closeMenu)},beforeDestroy() {document.removeEventListener("click", this.closeMenu)},methods: {closeMenu() {this.isShowTagsMenu = false},rightClick(e, i) {console.log("右键点击了", e.clientX, e.clientY, i);this.clientX = e.clientX;this.clientY = e.clientY;this.isShowTagsMenu = true;this.clickIndex = i;//关闭浏览器的默认行为window.event.returnValue = false;return false;},goTo(path) {this.$router.replace({path: (path == '/' || path == undefined ? '/Index' : path)});},close(index) {const name = this.tags[index].title;this.tags.splice(index, 1);if (this.tags.length == 0) return;//如果关闭当前页,则激活最后一个标签页const path = this.tags[this.tags.length - 1].path;if (name === this.$route.name && this.tags.length != 0) {this.$router.replace({path: (path == '/' || path == undefined ? '/Index' : path)});}}},watch: {$route: {immediate: true,handler(val, oldVal) {console.log(val);const bool = this.tags.find(item => {return item.path == val.path;});if (!bool) {this.tags.push({title: val.name,path: val.path});}}}}}
</script><style scoped>.tags {margin-top: 3px;/* 添加距离上边缘的距离 */}.tags .el-tag {padding-left: 10px;padding-top: 0px;margin-right: 5px;.cir {width: 8px;height: 8px;margin-right: 4px;background-color: #fff;border-radius: 50%;display: inline-block;}}
</style>

3.2、子组件 TagsMenu.vue

<template><div class="tags-menu" :style="{left:clientX+'px',top:clientY+'px'}"><ul><li v-for="item,index in tmenu" :key="index" v-show="isShowLi(index)"><i :class="item.icon"></i>{{item.text}}</li><li>{{clientX+","+clickIndex}}</li></ul></div>
</template><script>export default {props: ["clientX", "clientY", "clickIndex","tagsLength"],methods: {isShowLi(i) {if(this.tagsLength===1){//只有首页return i===0;}if (this.clickIndex == 0) {return ![1, 3].includes(i)}if(this.clickIndex == 1 && this.clickIndex==this.tagsLength-1){return ![3,4].includes(i)}else if(this.clickIndex == 1 && this.clickIndex!=this.tagsLength-1){return ![3].includes(i)}else if(this.clickIndex==this.tagsLength-1){return ![4].includes(i)}return true;}},data() {return {tmenu: [{icon: "el-icon-refresh-right",text: "刷新页面"},{icon: "el-icon-close",text: "关闭当前"},{icon: "el-icon-circle-close",text: "关闭其他"},{icon: "el-icon-back",text: "关闭左侧"},{icon: "el-icon-right",text: "关闭右侧"},{icon: "el-icon-circle-close",text: "关闭全部"}]}}}
</script><style>.tags-menu {position: absolute;z-index: 1000;/* 确保菜单在最上层 */background-color: white;/* 设置背景颜色为白色 */border: 1px solid #ddd;/* 添加边框 */border-radius: 4px;/* 圆角效果 */box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);/* 添加阴影 */padding: 10px;/* 内边距 */min-width: 120px;/* 最小宽度 *//* 可选:添加过渡效果 */transition: opacity 0.2s ease;}.tags-menu ul {list-style: none;/* 去掉列表样式 */margin: 0;/* 去掉外边距 */padding: 0;/* 去掉内边距 */}.tags-menu li {padding: 8px 12px;/* 单个菜单项的内边距 */cursor: pointer;/* 鼠标悬停变成手指 */transition: background-color 0.2s;/* 添加过渡效果 */}.tags-menu li:hover {background-color: #f5f5f5;/* 悬停时的背景颜色 */}
</style>

3.3、效果图

在这里插入图片描述

相关文章:

018、钩子函数 mounted和beforeDestroy、父组件向子组件传递参数 props 的使用

文章目录 1、mounted 和 beforeDestroy1.1、mounted1.2、beforeDestroy 2、父组件向子组件传递参数 props2.1、子组件定义2.2、父组件调用子组件并传参 3、完整例子3.1、父组件 Tags.vue3.2、子组件 TagsMenu.vue3.3、效果图 1、mounted 和 beforeDestroy 1.1、mounted mount…...

xlnt在Windows中的dll,lib生成

前言 花了半天时间想要把xlnt 集成到VS2022 Cmake项目中,以我目前掌握的能力,Cmake语法对于我来说难懂,对于只是使用过Cmake编译MySQL,或是其他lib,dll库的小白来说,不应该为了显示自己能力多么出众,强行去配置一些程序内容。 生活中没有绝对的事情,有舍有得. https://github…...

【网络】私有IP和公网IP的转换——NAT技术

目录 引言 NAT工作机制​编辑 NAT技术的优缺点 优点 缺点 个人主页&#xff1a;东洛的克莱斯韦克-CSDN博客 引言 公网被子网掩码划分为层状结构&#xff0c;一个公网IP的机器又可以用很多私有IP搭建内网。在日常生活场景中用的都是私有IP&#xff0c;例如手机&#xff0c;…...

java 面试 PDF 资料整理

“尊贵的求知者&#xff0c;作者特此献上精心编纂的Java面试宝典PDF&#xff0c;这份资料凝聚了无数面试精华与实战经验&#xff0c;是通往Java技术殿堂的钥匙。若您渴望在Java编程的求职之路上稳健前行&#xff0c;只需轻轻一点&#xff0c;完成这象征支持与认可的一键三联&am…...

初步认识Linux系统

前言 Linux系统具有许多优点&#xff0c;不仅系统性能稳定&#xff0c;而且是开源软件。其核心防火墙组件性能高效、配置简单&#xff0c;保证了系统的安全。在很多企业网络中&#xff0c;为了追求速度和安全&#xff0c;Linux不仅仅是被网络运维人员当作服务器使用&#xff0c…...

JavaScript AI 编程助手

JavaScript AI 编程助手 引言 随着人工智能技术的飞速发展&#xff0c;编程领域也迎来了前所未有的变革。JavaScript&#xff0c;作为全球最流行的编程语言之一&#xff0c;其与AI的结合为开发者带来了巨大的便利和无限的可能性。本文将探讨JavaScript AI编程助手的定义、功能…...

达梦数据库的系统视图v$datafile

达梦数据库的系统视图v$datafile 达梦数据库的V$DATAFILE 是一个重要的系统视图&#xff0c;提供了有关数据库数据文件的信息。 V$DATAFILE 系统视图 V$DATAFILE 视图用于显示数据库中每一个数据文件的详细信息。通过查询这个视图&#xff0c;数据库管理员可以了解数据文件的…...

Triton/window安装: triton-2.0.0-cp310-cp310-win_amd64.whl文件

下面这个github仓&#xff1a; https://github.com/PrashantSaikia/Triton-for-Windows/tree/main 安装命令也很简单&#xff0c;下载到本地后运行: pip install triton-2.0.0-cp310-cp310-win_amd64.whl...

应急响应-DDOS-典型案例

某单位遭受DDoS攻击事件如下 事件背景 2019年2月17日&#xff0c;某机构门户网站无法访问&#xff0c;网络运维人员称疑似遭受DDoS攻击&#xff0c;请求应急响应工程师协助。 事件处置 应急响应工程师在达到现场后&#xff0c;通过查看流量设备&#xff0c;发现攻击者使用僵…...

JAVA学习之知识补充(下)

六&#xff1a;File类与IO流&#xff1a; 这里给出三种常见的初始化方法&#xff1a; 通过文件路径初始化: File file new File("C:/example/test.txt");这种方法用于创建一个文件对象&#xff0c;该文件对象表示指定路径的文件或目录。例如&#xff1a;File fil…...

qt生成一幅纯马赛克图像

由于项目需要&#xff0c;需生成一幅纯马赛克的图像作为背景&#xff0c;经过多次测试成功&#xff0c;记录下来。 方法一&#xff1a;未优化方法 1、代码&#xff1a; #include <QImage> #include <QDebug> #include <QElapsedTimer>QImage generateMosa…...

python循环——九九乘法表(更加轻松的理解循环结构)

感受 首先&#xff0c;得明确意识到这个问题&#xff0c;就是我的循环结构学的一塌糊涂&#xff0c;完全不能很好的使用这个循环来实现各种九九乘法表达输出&#xff0c;这样的循环结构太差了&#xff0c;还需要我自己找时间来补充一下循环的使用&#xff0c;来拓宽自己的思考方…...

UDS诊断系列之十八故障码的状态掩码

在谈19服务的子功能之前&#xff0c;先说一下故障码&#xff08;DTC&#xff09;的状态掩码是什么。 一、状态掩码 状态掩码由八个状态位构成&#xff0c;客户端利用它向服务器请求与其状态相匹配的DTC信息。当服务器接收到来自客户端的请求时&#xff0c;它会通过过滤匹配的…...

【jvm】直接引用

目录 1. 说明2. 形式3. 特点4. 生成过程5. 作用 1. 说明 1.在Java虚拟机&#xff08;JVM&#xff09;中&#xff0c;直接引用&#xff08;Direct Reference&#xff09;是相对于符号引用&#xff08;Symbolic Reference&#xff09;而言的&#xff0c;它是指向内存中实际存在的…...

PythonStudio 控件使用常用方式(二十七)TActionList

PythonStudio是一个极强的开发Python的IDE工具&#xff0c;官网地址是&#xff1a;https://glsite.com/ &#xff0c;在官网可以下载最新版的PythonStudio&#xff0c;同时&#xff0c;在使用PythonStudio时&#xff0c;它也能及时为用户升到最新版本。它使用的是Delphi的控件&…...

PDF 转Word 开源库

1. Apache PDFBox Apache PDFBox 是一个开源的 Java 库&#xff0c;用于创建和操作 PDF 文档。虽然 PDFBox 本身没有直接支持 PDF 转 Word 的功能&#xff0c;但它可以提取 PDF 内容&#xff0c;你可以结合其他方法将这些内容写入 Word。 添加依赖 <dependency><gr…...

Docker - 深入理解Dockerfile中的 RUN, CMD 和 ENTRYPOINT

RUN docker file 中的 RUN 命令相对来教容易理解 RUN 指令用于在构建镜像时执行命令&#xff0c;这些命令会在 Docker 镜像的构建过程中执行。常用于安装软件包、设置环境变量、创建目录等。RUN 指令会在镜像构建中创建新的镜像层&#xff0c;每个 RUN 指令都会创建一个新的镜…...

Python 函数式编程 内置高阶函数及周边【进阶篇 3】推荐

前面我们已经总结并实践了用python获取到了数据。也介绍了python中http网络请求的几种方式&#xff0c;正在学习python开发语言或者对python3知识点生疏需要回顾的请点这里 &#xff0c;本章主要总结了函数式编程及特点 和 python中内置的高阶函数及周边知识&#xff0c;方便自…...

【Rust光年纪】探秘Rust GUI库:从安装配置到API概览

Rust语言GUI库全方位比较&#xff1a;选择适合你的工具 前言 在现代软件开发中&#xff0c;图形用户界面&#xff08;GUI&#xff09;库扮演着至关重要的角色。随着Rust语言的不断发展&#xff0c;越来越多的优秀的GUI库也相继问世&#xff0c;为Rust开发者提供了更多选择。本…...

Element plus部分组件样式覆盖记录

文章目录 一、el-button 样式二、Popconfirm 气泡确认框三、Popover 气泡卡片四、Checkbox 多选框五、Pagination 分页六、Form 表单七、Table 表格 一、el-button 样式 html&#xff1a; <el-button class"com_btn_style">button</el-button>样式覆盖…...

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

第一篇:Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

Java 加密常用的各种算法及其选择

在数字化时代&#xff0c;数据安全至关重要&#xff0c;Java 作为广泛应用的编程语言&#xff0c;提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景&#xff0c;有助于开发者在不同的业务需求中做出正确的选择。​ 一、对称加密算法…...

2025季度云服务器排行榜

在全球云服务器市场&#xff0c;各厂商的排名和地位并非一成不变&#xff0c;而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势&#xff0c;对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析&#xff1a; 一、全球“三巨头”…...

「全栈技术解析」推客小程序系统开发:从架构设计到裂变增长的完整解决方案

在移动互联网营销竞争白热化的当下&#xff0c;推客小程序系统凭借其裂变传播、精准营销等特性&#xff0c;成为企业抢占市场的利器。本文将深度解析推客小程序系统开发的核心技术与实现路径&#xff0c;助力开发者打造具有市场竞争力的营销工具。​ 一、系统核心功能架构&…...

OCR MLLM Evaluation

为什么需要评测体系&#xff1f;——背景与矛盾 ​​ 能干的事&#xff1a;​​ 看清楚发票、身份证上的字&#xff08;准确率>90%&#xff09;&#xff0c;速度飞快&#xff08;眨眼间完成&#xff09;。​​干不了的事&#xff1a;​​ 碰到复杂表格&#xff08;合并单元…...

32位寻址与64位寻址

32位寻址与64位寻址 32位寻址是什么&#xff1f; 32位寻址是指计算机的CPU、内存或总线系统使用32位二进制数来标识和访问内存中的存储单元&#xff08;地址&#xff09;&#xff0c;其核心含义与能力如下&#xff1a; 1. 核心定义 地址位宽&#xff1a;CPU或内存控制器用32位…...

在Zenodo下载文件 用到googlecolab googledrive

方法&#xff1a;Figshare/Zenodo上的数据/文件下载不下来&#xff1f;尝试利用Google Colab &#xff1a;https://zhuanlan.zhihu.com/p/1898503078782674027 参考&#xff1a; 通过Colab&谷歌云下载Figshare数据&#xff0c;超级实用&#xff01;&#xff01;&#xff0…...

【threejs】每天一个小案例讲解:创建基本的3D场景

代码仓 GitHub - TiffanyHoo/three_practices: Learning three.js together! 可自行clone&#xff0c;无需安装依赖&#xff0c;直接liver-server运行/直接打开chapter01中的html文件 运行效果图 知识要点 核心三要素 场景&#xff08;Scene&#xff09; 使用 THREE.Scene(…...

【Pandas】pandas DataFrame dropna

Pandas2.2 DataFrame Missing data handling 方法描述DataFrame.fillna([value, method, axis, …])用于填充 DataFrame 中的缺失值&#xff08;NaN&#xff09;DataFrame.backfill(*[, axis, inplace, …])用于**使用后向填充&#xff08;即“下一个有效观测值”&#xff09…...