vue组件scoped的作用 目的: 解决多个组件样式名相同, 冲突问题

在style上加入scoped属性, 就会在此组件的标签上加上一个随机生成的data-v开头的属性,下面一起来看一下,希望对大家有帮助。
vue组件-scoped作用

需求: p标签名选择器, 设置背景色

问题: 发现组件里的p和外面的p都生效了

解决: 给Pannel.vue组件里style标签上加scoped属性即可

<style scoped>
// style 添加 scoped 属性后,可以实现样式独立作用域<style scoped>p{
    background-color: pink;}</style>

在style上加入scoped属性, 就会在此组件的标签上加上一个随机生成的data-v开头的属性
而且必须是当前组件的元素, 才会有这个自定义属性, 才会被这个样式作用到
在这里插入图片描述
scoped的使命与作用
这里用vue做了一个demo,两个页面,一个页面中是掘金的a标签,一个页面是vue的a标签,我们一起看下scoped的作用,给其中一个页面的a标签加上红色,另外一个没有加任何样式,并且没有在style中使用scoped,如下图
在这里插入图片描述
答案大家应该都知道,没错!两个页面中的链接文字都变成了红色,当我们点击juejin这个页面的时候,浏览器会自动引入当前页面的样式,再去点击github时浏览器会复用这个样式,所以a链接的颜色都会变红,因为Vue是单页面应用,所以我们打开的每一个页面的样式都会被夹在成全局的样式,解决办法就是加上scoped,这时a标签的颜色就不同了,我们打开页面看下a标签(下图)

在这里插入图片描述
这时候的a标签多了一个data-v-xxxxxxx这个东西,这个就是Vue替我们加上的, Vue在构建构建这个项目的时候会提我们以组件单位,不同的组件下所有的元素都会加上同一个类似组件ID的东西,同时会在我们写的样式上以属性选择器的方式拼接上这个唯一标识

在这里插入图片描述
scoped的副作用
这时我们引入element-ui验证一下scoped的副作用,这里写了一个demo(下图),这里也使用了scoped
在这里插入图片描述
注意这里的input元素是没有例如data-v-xxxxxx的唯一标识的

但是我们自己写的样式(my-Txt input)在被构建之后是什么样子的呢?(下图)
在这里插入图片描述
如上图所示,我们自己写的样式却被拼接了这个唯一的标识,所以我们再怎么操作也是没法命中这个元素的,也就是说Vue并没有给这个input加上这个标识,但是却在我们的样式中加上了这个标识,但是我们如果把scoped去掉,那么就能命中目标,但是这样我们是不推荐的,样式会被打包到统一的样式中,这就是scoped的副作用,那我们怎么解决它呢?样式穿透

<style scoped>
.my-Txt {
  width: 200px;
}
.my-Txt ::v-deep input {
  background-color: pink;
}
</style>

在这里插入图片描述
可以看到这个唯一标识从input后面跑到了my-Txt的后面了,也就是说我们不加入这个::v-deep,Vue永远都会把这个唯一的标识拼接在我们写的样式的最后一段,如果我们想改变这个唯一标识的位置,就需要你用样式穿透来指定,那么上图的意思就是带有这个唯一标识的my-Txt的元素,它的子元素中的input会应用这个样式,而我们写的这个my-Txt也是具备这个唯一标识的

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/298296.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

设计模式之单例模式的懒饿汉

懒汉式 说白了就是你不叫我我不动&#xff0c;你叫我我才动。 类初始化模式&#xff0c;也叫延迟占位模式。在单例类的内部由一个私有静态内部类来持有这个单例类的实例。因为在 JVM 中&#xff0c;对类的加载和类初始化&#xff0c;由虚拟机保证线程安全。 public class Singl…

一个H3C交换机周期性断网并自动恢复的排查案例

一个朋友发我一个H3C日志&#xff0c;这个交换机是汇聚层交换机&#xff0c;1和2口是trunk口&#xff0c;其它接口是access接口&#xff0c;17-21口据说接的都是监控、终端。日志里面看到大量的拓朴改变&#xff0c;好几个网口up、down的日志&#xff0c;怀疑是环路&#xff0c…

Vue3——element-plus表格组件怎样得到当前行的id

实现方法&#xff1a; <el-table-column property"address" label"操作" show-overflow-tooltip header-align"center" v-slot"scope"><el-button type"success" click"editBtn(scope.row.id)">编辑…

视频转音频软件哪个好? 11 个高效的视频转音频转换器分享

网络上拥有数百个值得观看和聆听的音乐视频。但要聆听喜爱的音乐&#xff0c;用户必须观看整个视频&#xff0c;即使只有音乐让他们兴奋。那么&#xff0c;如何从视频中提取音频呢&#xff1f;简单的答案是使用视频到音频转换器将视频转换为音频格式并将其保存在您的设备上以供…

pyqt6 + pycharm 搭建+使用入门

首先安装PyQt6和PyQt6-tools。使用如下命令&#xff1a; pip install PyQt6 PyQt6-tools 但是运行后会报如下错误&#xff1a; 这个时候按照提示执行命令升级pip即可 python.exe -m pip install --upgrade pip 配置pycharm&#xff1a; 打开pycharm&#xff0c;进入setting&am…

创建专业电子邮件签名:提升个人与品牌形象的实用指南

电子邮件签名乃是品牌建设中常被忽略的一环。试想一下&#xff0c;若名片只是普通的、手工切割的复印纸&#xff0c;上面用黑体打印着你的联系方式&#xff0c;那将是多么平凡无奇。这将显得廉价、乏味且不专业——这正是人们不愿如此的原因。相反&#xff0c;他们渴望让自己的…

每日一博 - 多租户技术及其三种数据存储策略

文章目录 概述应用程序隔离数据隔离小结 概述 多租户技术&#xff08;Multi-Tenant Technology&#xff09;是软件即服务&#xff08;SaaS&#xff09;架构中的一项核心技术&#xff0c;允许单一软件应用或服务同时服务于多个客户&#xff08;即“租户”&#xff09;&#xff…

[每周一更]-(第81期):PS抠图流程(扭扭曲曲的身份证修正)

应朋友之急&#xff0c;整理下思路&#xff0c;分享一下~~ 分两步走&#xff1a;先用磁性套索工具圈出要处理的图&#xff1b;然后使用透视剪裁工具&#xff0c;将扭曲的图片拉平即可&#xff1b;(macbook pro) 做事有规则&#xff0c;才能更高效;用什么工具&#xff0c;先列举…

大模型日报-20240105

骁龙888实时运行&#xff0c;美团、浙大等打造全流程移动端多模态大模型MobileVLM https://mp.weixin.qq.com/s/-KnewDBeCN7a1XPk22u9Pw MobileVLM 是一款专为移动设备设计的快速、强大和开放的视觉语言助手。它结合了面向移动设备的架构设计和技术&#xff0c;包括从头开始训练…

【激活函数】PReLU 激活函数

1、介绍 PReLU&#xff08;Parametric Rectified Linear Unit&#xff09;激活函数是ReLU&#xff08;Rectified Linear Unit&#xff09;激活函数的一种改进。它是由 He et al. 在 2015 年提出的&#xff0c;旨在解决ReLU激活函数的一些局限性。 # 定义 PReLU 激活函数 prelu…

从vue小白到高手,从一个内容管理网站开始实战开发第六天,登录功能后台功能设计--API项目中的登录实现(二),工厂模式创建数据库连接

一、回顾 在第五天的时候我们开始创建后台所以需项目,并创建项目所需要的相关实体类,具体内容没有掌握的小伙伴可以看点击下面的链接去学习。 从vue小白到高手,从一个内容管理网站开始实战开发第六天,登录功能后台功能设计--API项目中的登录实现(一)-CSDN博客文章浏览阅读…

记一次实战云渗透总结

点击星标&#xff0c;即时接收最新推文 云渗透思路 所谓的云渗透通常指SaaS或PaaS渗透&#xff0c;即将服务器端的某些服务搭建在云服务器上&#xff0c;源代码的开发、升级、维护等工作都由提供方进行。从原理上看&#xff0c;云渗透思路与传统渗透思路相差无几。站点必须由底…

竞赛练一练 第24期:NOC大赛每日一练,scratch题目刷题第3天,包含答案解析

023年NOC大赛创客智慧编程赛项图形化复赛模拟题一,包含答案解析 本次题目来源:NOC 大赛创客智慧编程赛项图形化复赛模拟题(一) 第一题: 制作一个生日贺卡小程序. 1.点击绿旗后蛋糕出现在 (0,-80) 的位置,大小为 100,造型为 cake-b2.当碰到鼠标指针时,将造型切换为 cak…

MyBatis 源码分析(四):反射模块

前言 上一篇我们了解了Mybatis解析器模块&#xff0c;MyBatis 源码分析&#xff08;三&#xff09;&#xff1a;解析器模块 本篇我们来了解反射模块。相比 parsing 包来说&#xff0c;reflection 包的代码量大概是 2-3 倍。当然&#xff0c;不要慌&#xff0c;都是比较简单的代…

CAN通信的基本原理与实现方法

一. CAN协议概念 1.1 CAN 协议简介 CAN 是控制器局域网络 (Controller Area Network) 的简称&#xff0c;它是由研发和生产汽车电子产品著称的德国 BOSCH 公司开发的&#xff0c;并最终成为国际标准(ISO11519以及ISO11898),是国际上应用最广泛的现场总线之一。差异点如下&…

Linux系统安全及应用

目录 一、账号安全控制 1. 系统账号清理 1.1 将用户设置为无法登录 1.2 锁定用户 1.3 删除用户 1.4 锁定配置文件 2. 密码安全控制 2.1 设置密码规则 3. 命令历史 4. 切换用户 4.1 su和su - 4.2 限制使用su命令的用户 5. PAM安全认证 5.1 概述 5.2 pam相关…

通信触发流程

该示例方案主要介绍如何通过建立的Modbus或TCP通信来实现触发方案、协议解析、发送事件和以及响应配置等功能。 需求&#xff1a;使用Modbus通信触发指定流程运行。 搭建思路&#xff1a;在接收事件中使用协议组装&#xff0c;比较规则选择上升沿&#xff0c;当接收到的值从其…

JavaWeb——新闻管理系统(Jsp+Servlet)之jsp新闻查询

java-ee项目结构设计 1.dao:对数据库的访问&#xff0c;实现了增删改查 2.entity:定义了新闻、评论、用户三个实体&#xff0c;并设置对应实体的属性 3.filter&#xff1a;过滤器&#xff0c;设置字符编码都为utf8&#xff0c;防止乱码出现 4.service:业务逻辑处理 5.servlet:处…

软件测试|深入解析Docker Run命令:创建和启动容器的完全指南

简介 Docker是一种流行的容器化平台&#xff0c;用于构建、分发和运行应用程序。其中一个最基本且重要的Docker命令是docker run&#xff0c;用于创建和启动容器。本文将详细解析docker run命令的用途、参数和示例&#xff0c;帮助您全面掌握创建和启动容器的过程。 docker r…

前端面试题-nodejs

1.什么是nodejs&#xff0c;它与传统的网页服务器有什么不同&#xff1f; 是什么&#xff1f;nodejs是基于Chrome V8引擎的JavaScript运行环境&#xff0c;它可以使JavaScript代码在服务器上运行。 有什么不同&#xff1f;第一&#xff0c;nodejs采用事件驱动、非阻塞式I/O模型…