alcance
Antes de comprender el atributo de alcance, comprendamos qué hace Vue (el complemento que contiene) al representar el DOM. Después de representar el DOM, Vue generará un atributo de datos de cadena aleatorios en el nodo DOM, que otorga un identificador único al DOM en el componente actual.
Después de agregar el atributo de ámbito a la etiqueta de estilo, todo el CSS debajo del estilo se convertirá automáticamente después de que se represente la página, y se agregará al filtro el mismo valor de atributo de datos que el DOM. Es decir, a juzgar por los resultados, el atributo scoped hace que CSS solo funcione en los elementos del componente actual, evitando la contaminación global de CSS.
Cabe señalar que el filtro CSS modificado con alcance solo funciona en los elementos escritos en el compilador (de hecho, solo funciona en el elemento del componente actual). Por ejemplo, si usa la biblioteca de componentes de elementos, se escribe en el compilador, pero después de representar la página, la clase del elemento de entrada es "el-input__inner". En este momento, no funcionará si escribe ".el-input__inner" en el estilo del atributo de alcance, porque no hay ningún elemento con el nombre de clase el-input__inner en el componente actual.
>>> /profundo/ ::v-profundo
¿Y qué si queremos modificar dichos elementos? Podemos eliminar el atributo de alcance para que el alcance no se limite al componente actual. Pero eliminarlo causará contaminación de estilo global ¿Cómo podemos modificar el estilo del elemento elemento sin eliminar el alcance?
Una forma de evitar problemas es usar el estilo con el atributo de alcance y el estilo sin el atributo. Otro método es realizar penetración de estilo en el estilo del atributo de alcance.
Las funciones de /deep/ y ">>>" son las mismas. Para diferentes preprocesadores css, por ejemplo, sass no puede analizar el atributo ">>>", puede usar /deep/, que es un alias de ">>>", y el principio es el mismo.
Nota: La penetración de estilo solo puede penetrar en los elementos secundarios, no en los elementos principales.
1.>>>
Si el proyecto usa un proyecto css nativo, puede usar directamente >>> para penetrar.
<style scoped>
/*编译前*/
.a >>> .b {
/* ... */
}
/*编译后*/
.a[data-v-f3f3eg9] .b {
/* ... */ }
</style>
2./profundo/
Los preprocesadores scss, sass y less se usan en el proyecto, y el operador >>> puede reportar un error porque no se puede compilar. Puedes usar /profundo/ en este momento.
Nota: no se pueden usar versiones anteriores a vue-cli3
<style lang="scss" scoped>
/*用法1*/
.a {
/deep/ .b {
/* ... */
}
}
/*用法2*/
.a /deep/ .b {
/* ... */
}
</style>
3.::v-profundo
Si se usa el preprocesador, se puede usar ::v-deep.
<style lang="scss" scoped>
/*用法1*/
.a{
::v-deep .b {
/* ... */
}
}
/*用法2*/
.a ::v-deep .b {
/* ... */
}
</style>