当前位置: 首页 > 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>样式覆盖…...

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

python打卡day49

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

服务器硬防的应用场景都有哪些?

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...

Hive 存储格式深度解析:从 TextFile 到 ORC,如何选对数据存储方案?

在大数据处理领域&#xff0c;Hive 作为 Hadoop 生态中重要的数据仓库工具&#xff0c;其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式&#xff0c;很多开发者常常陷入选择困境。本文将从底…...

push [特殊字符] present

push &#x1f19a; present 前言present和dismiss特点代码演示 push和pop特点代码演示 前言 在 iOS 开发中&#xff0c;push 和 present 是两种不同的视图控制器切换方式&#xff0c;它们有着显著的区别。 present和dismiss 特点 在当前控制器上方新建视图层级需要手动调用…...

C++课设:简易日历程序(支持传统节假日 + 二十四节气 + 个人纪念日管理)

名人说:路漫漫其修远兮,吾将上下而求索。—— 屈原《离骚》 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 专栏介绍:《编程项目实战》 目录 一、为什么要开发一个日历程序?1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...