首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >(十六)组件设置样式

(十六)组件设置样式

作者头像
老怪兽
发布2023-02-22 16:24:25
1.1K0
发布2023-02-22 16:24:25
举报

给组件设置样式

  1. 基础给组件设置样式
/* 直接在 <style> 设置样式*/
<style>
/* 这里面设置的是最基本的样式,同时也是全局样式 */
</style>

2.只对组件生效的样式

/* 直接在 <style> 设置样式*/
<style scoped>
/* 这里设置的样式只针对组件内,就算其他组件有相同名字的css 也不会覆盖 */
</style>

3.使用 less sass 等预编译语言

<style lang="less" scoped>
// 在style标签上 加上lang属性就可以设置对应的预编译语言,vue在使用对应的预编译语言的时候需要安装依赖,否则无法使用
</style>

4.样式穿透

应用场景

应用场景,在当前组件中修改其他组件的样式,如果他们带有scoped 是无法修他们的样式,这里我们就需要使用vue 给我们提供的样式穿透了

<style lang="less" scoped>
// 场景父组件中引入的子组件,子组件的根组件有一个 .text 的css名字,如果带有scopod我们无法修改子组件嵌套的标签,这时候我们使用样式穿透

// 不起作用,但是如果直接修改子组件的根元素可以用普通方式修改,但是如果要修改子组件当中嵌套的标签就使用下面这种方法
.text a{
  color: red;
}

// 使用样式穿透, 设置成功
.text :deep(a) {
  color: red;
}
</style>

5.子组件修改父组件通过 slot 传递进来的标签(不常用)

// 如果我们要在子组件中设置父组件通过slot 传递进来标签的样式怎么办呢,正常直接在子组件当中是无法设置的,veu提供了 :slotted 来修改,但是这种方法尽量少用,因为我们不知道父组件到底要给我们传递什么

// 父组件通过slot 插槽给子组件传递了一个div
:slotted(dev) {
  // 子组件修改父组件通过 slot 插槽传递进来的div
  background-color: red;
}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2022年11月6日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 给组件设置样式
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档