scoped 和样式穿透

scoped

不使用 scoped

顺便复习一下 vue3 中路由的使用

配置路由并导出

// src/router/router.ts
// 配置路由并导出
import NoRed from '../components/nored.vue'
import Red from '../components/red.vue'

import { createRouter,createWebHistory } from "vue-router";

const routes = [
    { path: '/red', component: Red},
    { path: '/no_red', component: NoRed}
]

const router = createRouter({
    history: createWebHistory(),	// vue3 的 history 模式	对应 createWebHashHistory hash 模式
    routes
})

export default router

引入并使用组件

// src/main.ts
import { createApp } from 'vue'
import App from './App.vue'

// 引入路由
import router from './router/router'

// use 路由
createApp(App).use(router).mount('#app')

写组件

只在 red 中写样式并不加 scoped

<!-- src/components/nored.vue -->
<template>
    <div> 
      <h1>我应该不是红色</h1>
    </div>
</template>

<script setup lang="ts">

</script>

<style> 
</style>

<!-- src/components/red.vue -->
<template>
    <div> 
      <h1>我应该是红色</h1>
    </div>
</template>

<script setup lang="ts">

</script>

<style> 
  a {
    color: red
  }
</style>

显示组件

<!-- src/App.vue -->
<script setup lang="ts">

</script>

<template>
  <p>
     <router-link to="/red">red</router-link>
     <router-link to="/no_red" style="margin-left: 20px;">nored</router-link>
     <router-view></router-view>
   </p>
</template>

<style>

</style>

效果是

只在 red 组件中写了样式 结果 nored 也有了样式

使用 scoped

在 red 组件的 style 标签中加上 scoped

原理上就是 vue 在该组件的标签中加了一串字符

该组件中的样式中也会以属性选择器的方式拼接上

实际的步骤

给HTML的DOM节点加一个不重复data属性(形如：data-v-123)来表示他的唯一性

在每句css选择器的末尾（编译后的生成的css语句）加一个当前组件的data属性选择器（如[data-v-123]）来私有化样式

如果组件内部包含有其他组件，只会给其他组件的最外层标签加上当前组件的data属性

scoped 的副作用

如果我们在使用第三方库时企图修改其样式且使用 scoped（尤其是一些 ui 库）

会发现标签上并没有加上字符串，而样式中却加上了，因此样式会失效。

样式穿透

不使用样式穿透

.lei {
    input {
        background: red
    }
}

使用样式穿透 :deep()

.lei {
    :deep(input) {
        background: red
    }
}

这样就可以修改第三方库的样式了

参考

https://juejin.cn/post/7083051766874374174

https://blog.csdn.net/qq1195566313/article/details/123319462