1. ¿Qué tiene su alcance y por qué deberíamos utilizarlo?
En la etiqueta de estilo en el archivo vue, hay un atributo especial: alcance.
Cuando una etiqueta de estilo tiene un atributo de alcance, su estilo CSS solo se puede aplicar al componente actual. A través de este atributo, se puede evitar que los estilos entre componentes se contaminen entre sí.
2. El principio de alcance
Genere un identificador único para la instancia del componente, agregue un atributo de etiqueta al elemento DOM correspondiente a cada etiqueta en el componente y
use data-v-xxxx para
3. Ejemplo
Código Vue antes de la traducción.
<template>
<div class="example">hello world</div>
</template>
<style scoped>
.example {
color: red;
}
</style>
Después de la traducción:
<template>
<div class="example" data-v-49729759>hello world</div>
</template>
<style scoped>
.example[data-v-49729759] {
color: red;
}
</style>
4. ¿Por qué necesitamos penetrar con alcance?
Después de hacer referencia a un componente de terceros, debe modificar localmente el estilo del componente de terceros en el componente sin eliminar el atributo de alcance y causar contaminación de estilo entre componentes. En este momento, el alcance solo se puede penetrar mediante métodos especiales.
5. Métodos de penetración del estilo.
Hay tres formas de escribir penetración de estilo: >>>, /deep/, ::v-deep
>>>
Si el proyecto usa estilos nativos CSS, puede usar directamente >>> modificación penetrante
/* 用法： */
div >>> .cla {
color: red;
}
/profundo/
El preprocesador scss, sass y el operador less >>> se utilizan en el proyecto y es posible que se informe un error porque no se puede compilar. Puedes usar /deep/
Nota: vue-cli3 o superior no está disponible.
/* 用法： */
div /deep/ .cla {
color: red;
}
::v-profundo
/* 用法： */
div ::v-deep .cla {
color: red;
}
6. Principio de penetración del estilo.
El selector después del alcance agregará un logotipo del componente actual de forma predeterminada. Por ejemplo,
después de usar la penetración de estilo en [data-v-49729759], el selector después de la profundidad no agregará un logotipo al final.
Ejemplo
Componente principal:
<template>
<div class="cssdeep">
<!-- 样式穿透 -->
<cssdeepcom></cssdeepcom>
</div>
</template>
<script>
import cssdeepcom from '../components/cssdeepcom'
export default {
data(){
return{
}
},
components:{
cssdeepcom,
},
}
</script>
<style lang="less" scoped>
.cssdeep /deep/ .cssdeepcom{
background: blue;
}
</style>
Subconjunto:
<template>
<div class="cssdeepcom"></div>
</template>
<script>
export default {
data(){
return{
}
},
}
</script>
<style lang="less" scoped>
.cssdeepcom{
width: 100px;
height: 100px;
background: red;
}
</style>
Después de que el componente principal usa la penetración, el identificador [data-v-xxxx] no va seguido de cssdeepcom, sino que sigue el identificador del componente principal al final del nivel superior de profundidad.