笔记篇——Vue组件的使用，你还在苦恼组件样式无法修改吗?
ztj100 2024-11-26 11:15 39 浏览 0 评论
组件的注册
1. 注册组件的两种方式
Vue中注册组件的方式分为“全局注册”和“局部注册”两种
①被全局注册的组件，可以在全局任何一个组件内使用
②被局部注册的组件，只能在当前注册的范围内使用
2. 全局注册组件
3. 局部注册组件
4. 全局注册组件和局部注册组件的区别
①被全局注册的组件可以在全局任何一个组件内使用
②被局部注册的组件只能在当前注册的范围内使用
应用场景：
如果某些组件在开发期间的使用频率很高，推荐进行全局注册，如果某些组件只在特定的情况下会被用到，推荐进行局部注册。
5. 组件注册时名称的大小写
在进行组件的注册时，定义组件注册名称的方式有两种：
① 使用 kabab-case命名法（俗称短横线命名法，例如my-swiper）
② 使用PascalCase命名法（俗称帕斯卡命名法或大驼峰命名，例如MySwiper）
③ 特点：短横线命名法必须严格按照短横线名称进行使用，帕斯卡命名法既可以严格按照帕斯卡名称进行使用又可以转化为短横线名称进行使用
④ 注意：在实际开发中，推荐使用帕斯卡命名法为组件注册名称，因为它的适用性更强。
6. 通过name属性注册组件
在注册组件，除了可以直接提供组件的注册名称之外，还可以把组件的name属性作为注册后组件的名称。
7. 组件之间的样式冲突
默认情况下，写在.Vue组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题。导致组件之前样式冲突的根本原因是：
① 单页面应用程序中，所有组件的DOM结构，都是基于唯一的index.html页面进行呈现的
② 每个组件中的样式，都会影响整个index.html页面中的DOM元素
8. 如何解决组件样式冲突的问题
①为每个组件分配唯一的自定义属性，在编写组件样式时，通过属性选择器来控制样式的作用域。
② style节点的scoped属性
为了提高开发效率和开发体验，vue为style节点提供了scoped属性，从而防止组件之间的样式冲突问题。
9. /deep/ 样式穿透
如果给当前组件的style节点添加了scoped属性，则当前组件的样式对其子组件是不生效的。如果想让某些样式对子组件生效，可以使用/deep/深度选择器。
注意：/deep/是vue2.x中实现样式穿透的方案。在vue3.x中推荐使用:deep（）代替/deep/
相关推荐
- Python 操作excel的坑__真实的行和列
-
大佬给的建议__如何快速处理excelopenpyxl库操作excel的时候，单个表的数据量大一些处理速度还能接受，如果涉及多个表甚至多个excel文件的时候速度会很慢，还是建议用pandas来处理，...
- Python os.path模块使用指南:轻松处理文件路径
-
前言在Python编程中，文件和目录的操作是非常重要的一部分。为了方便用户进行文件和目录的操作，Python标准库提供了os模块。其中，os.path子模块提供了一些处理文件路径的函数和方法。本文主要...
- Python常用内置模块介绍——文件与系统操作详解
-
Python提供了多个强大的内置模块用于文件和系统操作，下面我将详细介绍最常用的几个模块及其核心功能。1.os模块-操作系统交互...
- Python Flask 建站框架实操教程（flask框架网页）
-
下面我将带您从零开始构建一个完整的Flask网站，包含用户认证、数据库操作和前端模板等核心功能。##第一部分：基础项目搭建###1.创建项目环境```bash...
- 为你的python程序上锁:软件序列号生成器
-
序列号很多同学可能开发了非常多的程序了，并且进行了...
- PO设计模式全攻略，在 UI 自动化中的实践总结(以企业微信为例)
-
一、什么是PO设计模式？PO（PageObject）设计模式将某个页面的所有元素对象定位和对元素对象的操作封装成一个Page类，即一个py文件，并以页面为单位来写测试用例，实现页面对象和测试用例的...
- 这种小工具居然也能在某鱼卖钱?我用Python一天能写...
-
前两天在某鱼闲逛，本来想找个二手机械键盘，结果刷着刷着突然看到有人在卖——Word批量转PDF小工具...
- python打包成exe，程序有图标，但是任务栏和窗口都没有显示图标
-
代码中指定图标信息#设置应用ID，确保任务栏图标正确显示ifsys.platform=="win32":importctypesapp_id=...
- 使用Python构建电影推荐系统（用python做推荐系统）
-
在日常数据挖掘工作中，除了会涉及到使用Python处理分类或预测任务，有时候还会涉及推荐系统相关任务。...
- python爬取并分析淘宝商品信息（python爬取淘宝商品数据）
-
python爬取并分析淘宝商品信息背景介绍一、模拟登陆二、爬取商品信息1.定义相关参数2.分析并定义正则3.数据爬取三、简单数据分析1.导入库2.中文显示3.读取数据4.分析价格分布5.分析销售...
- OpenCV入门学习基础教程(从小白变大神)
-
Opencv是用于快速处理图像处理、计算机视觉问题的工具,支持多种语言进行开发如c++、python、java等,下面这篇文章主要给大家介绍了关于openCV入门学习基础教程的相关资料,需要的朋友可以...
- python图像处理-一行代码实现灰度图抠图
-
抠图是ps的最基本技能，利用python可以实现用一行代码实现灰度图抠图。基础算法是...
- 从头开始学python:如何用Matplotlib绘图表
-
Matplotlib是一个用于绘制图表的库。如果你有用过python处理数据，那Matplotlib可以更直观的帮你把数据展示出来。直接上代码看例子：importmatplotlib.pyplot...
- Python爬取爱奇艺腾讯视频 250,000 条数据分析为什么李诞不值得了
-
在《Python爬取爱奇艺52432条数据分析谁才是《奇葩说》的焦点人物？》这篇文章中，我们从爱奇艺爬取了5万多条评论数据，并对一些关键数据进行了分析，由此总结出了一些明面上看不到的数据，并...
- Python Matplotlib 库使用基本指南
-
简介Matplotlib是一个广泛使用的Python数据可视化库，它可以创建各种类型的图表、图形和可视化效果。无论是简单的折线图还是复杂的热力图，Matplotlib提供了丰富的功能来满足我们...
欢迎 你 发表评论:
- 一周热门
- 最近发表
-
- Python 操作excel的坑__真实的行和列
- Python os.path模块使用指南:轻松处理文件路径
- Python常用内置模块介绍——文件与系统操作详解
- Python Flask 建站框架实操教程（flask框架网页）
- 为你的python程序上锁:软件序列号生成器
- PO设计模式全攻略，在 UI 自动化中的实践总结(以企业微信为例)
- 这种小工具居然也能在某鱼卖钱?我用Python一天能写...
- python打包成exe，程序有图标，但是任务栏和窗口都没有显示图标
- 使用Python构建电影推荐系统（用python做推荐系统）
- python爬取并分析淘宝商品信息（python爬取淘宝商品数据）
- 标签列表
-
- idea eval reset (50)
- vue dispatch (70)
- update canceled (42)
- order by asc (53)
- spring gateway (67)
- 简单代码编程 贪吃蛇 (40)
- transforms.resize (33)
- redisson trylock (35)
- 卸载node (35)
- np.reshape (33)
- torch.arange (34)
- npm 源 (35)
- vue3 deep (35)
- win10 ssh (35)
- vue foreach (34)
- idea设置编码为utf8 (35)
- vue 数组添加元素 (34)
- std find (34)
- tablefield注解用途 (35)
- python str转json (34)
- java websocket客户端 (34)
- tensor.view (34)
- java jackson (34)
- vmware17pro最新密钥 (34)
- mysql单表最大数据量 (35)