vue作用域原理及深度渗透

时间：2023-03-31 18:23:23 vue.js

.a{.b{background-color:#bfa}}如果vue组件有作用域样式，postcss会在编译Instance时给组件中的所有dom元素添加一个[组件唯一标识]动态属性[hash值，data-v-]ID]（这里是dom，包括[commondom元素]和[subcomponentrootelement]）用于样式标签下的所有选择器，不包括[deepdepthselector]最后一层添加属性选择器[Hashvalue,data-v-instanceID]login

.a{.b{background-color:#bfa}}已编译

.a.b[data-v-257dda99b]{background-color:#bfa}深度选择器的原理很简单，Vue不会给深度选择器Selector后面的选择器单元添加属性[hashvalue,data-v-instanceID]深度选择器css对应>>>less/scss等preprocessing对应/deep/,::v-deep和最新的：v-deep()//父组件//子组件编译后

我是父组件

我是子组件

我是子组件的段落

[data-v-257dda99b].child.dyx{background-color:red;}.dyx选择器没有了，所以样式可以正常传递给子组件的有效属性选择器[hashvalue,data-v-instanceID]。该位置将被放置在deep深度选择器之上一层，以确保该样式仍然只是部分有效的域隔离。

上一篇：vue路由+Tab组件实现多tab功能

下一篇：8.Uniapp+vue+腾讯IM+腾讯音视频开发仿微信IM，各种消息收发，音视频通话，附vue源码-聊天输入框扩展面板的实现

vue作用域原理及深度渗透相关文章

vue作用域原理及深度渗透

我是父组件

我是一个子组件