当前位置: 首页 > 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;用于传输网页的…...

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装&#xff08;Encapsulation&#xff09; 定义&#xff1a;将数据&#xff08;属性&#xff09;和操作数据的方法绑定在一起&#xff0c;通过访问控制符&#xff08;private、protected、public&#xff09;隐藏内部实现细节。示例&#xff1a; public …...

练习(含atoi的模拟实现,自定义类型等练习)

一、结构体大小的计算及位段 &#xff08;结构体大小计算及位段 详解请看&#xff1a;自定义类型&#xff1a;结构体进阶-CSDN博客&#xff09; 1.在32位系统环境&#xff0c;编译选项为4字节对齐&#xff0c;那么sizeof(A)和sizeof(B)是多少&#xff1f; #pragma pack(4)st…...

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎?2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长,文件大。2.其次,树深,IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer &#xff08;1&#xff09;资源 论文&a…...

C++_哈希表

本篇文章是对C学习的哈希表部分的学习分享 相信一定会对你有所帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、基础概念 1. 哈希核心思想&#xff1a; 哈希函数的作用&#xff1a;通过此函数建立一个Key与存储位置之间的映射关系。理想目标&#xff1a;实现…...

Appium下载安装配置保姆教程(图文详解)

目录 一、Appium软件介绍 1.特点 2.工作原理 3.应用场景 二、环境准备 安装 Node.js 安装 Appium 安装 JDK 安装 Android SDK 安装Python及依赖包 三、安装教程 1.Node.js安装 1.1.下载Node 1.2.安装程序 1.3.配置npm仓储和缓存 1.4. 配置环境 1.5.测试Node.j…...

算法刷题-回溯

今天给大家分享的还是一道关于dfs回溯的问题&#xff0c;对于这类问题大家还是要多刷和总结&#xff0c;总体难度还是偏大。 对于回溯问题有几个关键点&#xff1a; 1.首先对于这类回溯可以节点可以随机选择的问题&#xff0c;要做mian函数中循环调用dfs&#xff08;i&#x…...

职坐标物联网全栈开发全流程解析

物联网全栈开发涵盖从物理设备到上层应用的完整技术链路&#xff0c;其核心流程可归纳为四大模块&#xff1a;感知层数据采集、网络层协议交互、平台层资源管理及应用层功能实现。每个模块的技术选型与实现方式直接影响系统性能与扩展性&#xff0c;例如传感器选型需平衡精度与…...