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

scope,deep穿透的实际应用

一.父组件代码

<template><div id="app"><h1 class="box"><pageName> </pageName></h1></div>
</template><script>
import  pageName from "../src/components/pageName.vue";
export default {data() {return {imageUrl: "",};},methods: {},components: {pageName,},
};
</script><style lang="less" scoped></style>>
.box{color: red;
}
</style>

二.子组件代码

<template><div class=""><h1>我是子页面</h1></div>
</template><script>
export default {name: "",data() {return {};},components: {},
};
</script><style scoped lang="less"></style>

三.此时父组件和子组件都有scope属性时候的效果

文字并没有编程红色,scope属性能保证当前页面的属性不被污染。

此时我们可以利用deep属性进行穿透

重写写过后的代码

穿透子组件,本来子组件有独立的作用域

效果

四.穿透element-ui里面的组件

代码:

效果图

五.样式穿透案例

<template><div class=""><el-badge :value="12" class="item"><el-button size="small">评论</el-button></el-badge></div>
</template><script>
export default {name: "",data() {return {};},components: {},
};
</script><style scoped lang="less">
::v-deep .el-badge {.el-button {color: pink;}
}
</style>

效果图

相关文章:

scope,deep穿透的实际应用

一.父组件代码 <template><div id"app"><h1 class"box"><pageName> </pageName></h1></div> </template><script> import pageName from "../src/components/pageName.vue"; export de…...

Multipass虚拟机设置局域网固定IP同时实现快速openshell的链接

本文只介绍在windows下实现的过程&#xff0c;Ubuntu采用22.04 安装multipass后&#xff0c;在卓面右下角Open shell 就可以链接默认实例Primary&#xff0c;当然如果你有多个虚拟机&#xff0c;可以针对不同内容单独建立终端的链接&#xff0c;而本文仅仅用Primary来说明。 …...

Webpack5 core-js和babel-loader区别和用法

文章目录 core-js是什么&#xff0c;有什么用&#xff1f;为什么使用了babel-loader对js进行兼容性配置还需要core-js?core-js的具体用法总结 core-js是什么&#xff0c;有什么用&#xff1f; core-js是一个流行的JavaScript库&#xff0c;它提供了对新的JavaScript特性、API…...

软考高级架构师——5、系统规划分析与设计方法

系统计划主要用于描述从项目提出、选择到确立的过程&#xff0c;包括系统项目的提出与可行性 分析&#xff0c;系统方案的制订、评价和改进&#xff0c;新旧系统的分析和比较&#xff0c;以及现有软件、硬件和数据 资源的有效利用等问题。 1、项目的提出与选择 项目的立项目标…...

区块链学习6-长安链部署:如何创建特定共识节点数和同步节点数的链

正常prepare的时候只支持4 7 13 16个节点个数&#xff0c;想要创建10个节点&#xff0c;其中5个是共识节点&#xff0c;如何实现&#xff1f; 1. 注释掉prepare.sh的这几行&#xff1a; 2. 修改 crytogen的模板文件&#xff1a; 如果是cert模式&#xff1a;chainmaker-crypt…...

北航基于openEuler构建工业机器人操作系统,打造“开箱即用”的机器人基础软件平台

北京航空航天大学是国家“双一流”建设高校&#xff0c;以建设扎根中国大地的世界一流大学为发展目标。北京航空航天大学在机器人领域一直处于行业前沿&#xff0c;以其亮眼的成果和优秀的师资力量&#xff0c;成为国内机器人领域的重要参与者和建设者。机器人操作系统是机器人…...

孤儿进程与僵尸进程

进程退出 关于进程退出有两个函数 exit和 _exit&#xff1a;其主要差别是在于是否直接退出。 其流程主要区别如下&#xff1a; 孤儿进程&#xff08;不存在危害&#xff09; 父进程运行结束&#xff0c;但子进程还在运行&#xff08;未运行结束&#xff09;&#xff0c;这…...

redis的基础命令01

1、操作库的指令 1、清除当前库---flushdb 2、清除所有库---flushAll 2、操作key的指令 最常用的指令get、set 1&#xff09;set key value 2&#xff09;get key 基础指令 1、del 删除单个&#xff1a;del key 、批量删除&#xff1a;del key1 key2 key3 2、exists 判断key是否…...

批量将excel文件合并

要批量合并多个Excel文件&#xff0c;可以按照以下步骤进行操作&#xff1a; 1. 导入所需的Python库&#xff1a;首先&#xff0c;您需要导入pandas库来处理Excel文件。 import pandas as pd 2. 定义文件路径和输出文件名称&#xff1a; input_folder "your_input_fo…...

关于Vue与服务器端的通信:如何实现登录鉴权

随着前后端分离开发模式的流行&#xff0c;Vue作为一种轻量级的JavaScript框架&#xff0c;被广泛用于前端开发。Vue可以与服务器进行通信来获取数据和进行鉴权&#xff0c;本文将探讨如何实现登录鉴权的过程&#xff0c;并给出相应的代码示例。 一、前端登录请求的发送与接收…...

GrapeCity Documents for Excel, .NET Crack

GrapeCity Documents for Excel, .NET 增加了对双面打印的支持。 GcExcel.NET支持PrintOutOptions类中的Duplex枚举&#xff0c;以启用/禁用页面上的双面打印。 枚举中有四个选项&#xff0c;用户可以相应地使用它们来打印工作簿&#xff1a; 双面打印。Default表示打印机的默认…...

wordpress网站Ajax留言评论+自定义评论字段

前端代码&#xff0c;下面的电话&#xff0c;公司&#xff0c;为自定义字段。 <form method"post" id"commentform" class"comment-form shansubmit" ><lable>用户</lable><input id"author" type"text&qu…...

AJAX-笔记(持续更新中)

文章目录 Day1 Ajax入门1.AJAX概念和axios的使用2. 认识URL3.URL的查询参数4.常用的请求方法和数据提交5.HTTP协议-报文6.接口文档7.form-serialize插件8.案例用户登录 Day2 Ajax综合案bootstrap弹框图书管理图片上传更换背景个人信息设置 Day3 AJAX原理XMLHttpRequestPromise封…...

模板复用和文章详情页(Go搭建qiucode.cn 之七)

模板复用其实就是动态内容驱动着部分变化的区域,公共区域是整个网站页面都在共用的内容,这便是模板复用的妙处。 模板复用 作为服务端编程语言的Golang,在web模板渲染引擎上当然也不逊色于其他同类型的服务端语言,它同样也有属于自己的那一套模板渲染引擎。 更为确切的叫…...

Android 使用SQLite的案例详解

1、说明 sqlite是个轻量级的数据库,可用于嵌入式。有时候做本地的web开发的时候,我会把sqlite作为内置数据库,这样便于部署,直接启动应用即可。 这里主要是将android中的使用过程记录一下。主要包含,数据如何初始化,在不同的activity中如何使用,以及增删改查的实现。 …...

linux 命令--查看网络端口命令

使用 netstat 检查端口 netstat 是一个命令行工具&#xff0c;可以提供有关网络连接的信息。 netstat - atulnp会显示所有端口和所有对应的程序&#xff0c;用grep管道可以过滤出想要的字段 -a &#xff1a;all&#xff0c;表示列出所有的连接&#xff0c;服务监听&#xff…...

python一个请求chatgpt3.5模型例子

当然可以&#xff01;你可以使用OpenAI的 openai.ChatCompletion.create() 方法来请求 ChatGPT 3.5 模型的回复。以下是一个使用Python进行请求的示例代码&#xff1a; python import openai# 设置OpenAI API的访问密钥 openai.api_key YOUR_API_KEY# 发送请求给ChatGPT模型 …...

数据结构:栈的实现(C实现)

个人主页 &#xff1a; 个人主页 个人专栏 &#xff1a; 《数据结构》 《C语言》 文章目录 前言一、栈的实现思路1. 结构的定义2. 初始化栈(StackInit)3. 入栈(StackPush)4. 出栈(StackPop)5. 获取栈顶元素(StackTop)6. 检查栈是否为空(StackEmpty)7. 销毁栈(StackDestroy) 二、…...

v-md-editor自定义锚点(生成目录)数组转树结构

接前两篇博文&#xff0c;最终方案终于定了&#xff0c;也把之前做的编辑器模式给否决了&#xff0c;原因是系统中有老的文档需要平替&#xff0c;因此就不能通过编辑器这种模式了&#xff0c;太麻烦了。 最终方案&#xff1a;线下手动pandoc word转markdown&#xff0c;然后将…...

java 11 新特效解读(2)

目录 全新的HTTP 客户端API 更简化的编译运行程序 废弃Nashorn引擎 ZGC 优势&#xff1a; ZGC的设计目标是&#xff1a; 在当前JDK中看不到什么&#xff1f; 一个标准化和轻量级的JSON API 新的货币API 展望 全新的HTTP 客户端API HTTP&#xff0c;用于传输网页的…...

BitNet b1.58-2B-4T实战指南:WebUI离线使用与本地模型缓存策略

BitNet b1.58-2B-4T实战指南&#xff1a;WebUI离线使用与本地模型缓存策略 1. 项目概述 BitNet b1.58-2B-4T是一款革命性的1.58-bit量化开源大模型&#xff0c;采用独特的-1、0、1三值权重设计&#xff08;平均1.58 bit&#xff09;&#xff0c;配合8-bit整数激活&#xff0c…...

PYTHON学习笔记12(os模块)

OS文件/目录方法os模块是python标准库中的一个重要模块&#xff0c;提供了与操作系统交互的功能&#xff0c;通过此模块可以执行文件操作、目录操作、环境变量管理、进程管理等任务。os模块是跨平台的&#xff0c;可以在不同的操作系统使用相同的代码。使用os模块之前&#xff…...

避坑指南:SOEM中SDO读写超时、数据错乱的5个常见问题与调试方法

避坑指南&#xff1a;SOEM中SDO读写超时、数据错乱的5个常见问题与调试方法 在工业自动化领域&#xff0c;EtherCAT因其高实时性和灵活性成为主流通信协议之一。SOEM作为开源的EtherCAT主站实现&#xff0c;被广泛应用于各类设备控制场景。然而&#xff0c;许多开发者在实际使用…...

Beyond Compare 5密钥生成器:如何快速生成永久授权密钥的完整指南

Beyond Compare 5密钥生成器&#xff1a;如何快速生成永久授权密钥的完整指南 【免费下载链接】BCompare_Keygen Keygen for BCompare 5 项目地址: https://gitcode.com/gh_mirrors/bc/BCompare_Keygen Beyond Compare是一款功能强大的文件和文件夹比较工具&#xff0c;…...

从.bash_profile到.zshrc:MacOS环境变量配置的演进与实战

1. 从bash到zsh&#xff1a;MacOS环境配置的变迁史 记得第一次用Mac电脑时&#xff0c;我像大多数开发者一样&#xff0c;习惯性地在用户目录下创建了.bash_profile文件来配置环境变量。直到某天系统升级到Catalina后&#xff0c;突然发现之前配置的PATH变量失效了——这就是苹…...

vulhub系列-73-RA1NXing Bots(超详细)

免责声明&#xff1a;本文记录的是 RA1NXing Bots 渗透测试靶机 的解题过程&#xff0c;所有操作均在 本地授权环境 中进行。内容仅供 网络安全学习与防护研究 使用&#xff0c;请勿用于任何非法用途。读者应遵守《网络安全法》及相关法律法规&#xff0c;自觉维护网络空间安全…...

口碑好的不锈钢彩涂板企业

朋友&#xff0c;最近是不是在头疼选不锈钢彩涂板的事儿&#xff1f;是不是感觉市场上牌子五花八门&#xff0c;价格从几十到几百一平都有&#xff0c;销售说得天花乱坠&#xff0c;自己却越看越懵圈&#xff1f;别急&#xff0c;今天咱不聊虚的&#xff0c;就跟你像朋友一样唠…...

Elasticsearch:从入门到生产落地

一、什么是 Elasticsearch&#xff1f;为什么我们需要它&#xff1f;Elasticsearch&#xff08;简称 ES&#xff09;是一个开源的、分布式的、RESTful 风格的搜索引擎和数据分析引擎。它基于 Lucene 库构建&#xff0c;提供了简单易用的 API&#xff0c;隐藏了 Lucene 的复杂性…...

你当问卷调查是什么?不是在“发传单”!好写作AI教你设计出能发顶刊的学术问卷

很多人把问卷设计当成一件“谁都会”的事&#xff1a;列几个问题&#xff0c;发出去&#xff0c;回收数据&#xff0c;分析收工。 如果你也是这么想的&#xff0c;那么恭喜你&#xff0c;你已经成功加入了“问卷翻车俱乐部”。 据学者对我国近六年教育类核心期刊发表的113篇问…...

检测 Python 游戏中三位随机数的数字重复情况并计算胜率倍数

本文教你如何将 random.randint(100, 999) 生成的三位整数拆解为各位数字&#xff0c;高效判断是否存在重复数字&#xff08;如 112、333&#xff09;&#xff0c;并量化重复程度&#xff08;双重复/三重复&#xff09;&#xff0c;从而为游戏逻辑提供可编程的胜率倍数变量。 …...