掉了两根头发后,我悟了!vue3的scoped原来是这样避免样式污染(上)

  • 掉了两根头发后,我悟了!vue3的scoped原来是这样避免样式污染(上)已关闭评论
  • 72 次浏览
  • A+
所属分类:Web前端
摘要

众所周知,在vue中使用scoped可以避免父组件的样式渗透到子组件中。使用了scoped后会给html增加自定义属性data-v-x,同时会给组件内CSS选择器添加对应的属性选择器[data-v-x]。这篇我们来讲讲vue是如何给CSS选择器添加对应的属性选择器[data-v-x]。注:本文中使用的vue版本为3.4.19,@vitejs/plugin-vue的版本为5.0.4。
关注


前言

众所周知,在vue中使用scoped可以避免父组件的样式渗透到子组件中。使用了scoped后会给html增加自定义属性data-v-x,同时会给组件内CSS选择器添加对应的属性选择器[data-v-x]。这篇我们来讲讲vue是如何给CSS选择器添加对应的属性选择器[data-v-x]。注:本文中使用的vue版本为3.4.19@vitejs/plugin-vue的版本为5.0.4
关注