Vue中css的 /deep /及 >>> 的用法
2023-09-11 14:22:30 时间
/deep/ 深度选择器
在vue中,我们为了避免父组件的样式影响到子组件的样式,会在style中加
父组件:
<template>
<div>
<h1 class="title">{{ name }}</h1>
<input type="text" v-model.lazy="name">
<child />
</div>
</template>
<script>
import child from './child';
export default {
data () {
return {
name:''
}
},
components: {
child
}
}
</script>
<style scoped>
.title{
color: #ff0;
}
</style>
子组件:
<template>
<div>
<h1 class="title">child</h1>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
.title{
color:#f00;
}
</style>
我们在加了 scoped 之后样式会自动添加一个hash值,如下:
.title[data-v-211e4c4a] {
color: #ff0;
}
但是这样也存在着一个问题,比如你使用了别人的组件或者自己开发一个组件,有时候你修改一处就可能影响到别的地方,这个时候要么你不用别人的组件,自己重新封装一个,但很多时候是不太现实的,所以就需要有一个方法或者方式,既不影响到别的地方,又能修改子组件在当前的样式。
那么我们就需要/deep/,使用方式也很简单:
<style scoped>
/deep/ .title{
color: #ff0;
}
</style>
当然了把 /deep/ 换成 >>>,也可以达到同样的效果。
相关文章
- Vue笔记:引入animate.css
- CSS - 解决子级用css float浮动 而父级div没高度不能自适应高度
- VUE - 路由跳转时设置动画效果
- Vue - @import css 加载第三方css
- [Vue @Component] Define Props on a Vue Class with vue-property-decorator
- [Vue] Use Vue.js Watchers to Respond to Async Updates
- uni-app:ios/android中的nvue和vue页面加载自定义字体(hbuilderx 3.7.3)
- vue.js项目在nginx上部署:使spring后端记录真实ip地址
- GVA gin-vue-admin部署后端注意事项
- vue指令:v-on(@click)绑定点击事件,也就是方法
- vue-router嵌套路由示例
- Vue入门教程:node安装vue命令行工具及启动项目
- standalone vue initialization process - Vue应用的初始化过程
- vue项目打包后打开空白解决办法
- vue:export default 和 export 区别(difference between Vue 'export default' and 'new Vue')
- 计算机毕设 SSM Vue 电影院在线售票管理系统(含源码+论文)
- Vue学习之--------组件自定义事件(绑定、解绑)(2022/8/21)
- Vue中vue-i18n结合vant-ui实现国际化
- 事件监听 & 页面滚动(页面滚动到某一位置时显示/隐藏某元素,Vue环境)
- Vue(二)vue 指令及用法举例
- vue创建备忘录