com escopo
Antes de entender o atributo scoped, vamos entender o que o Vue (o plugin nele) faz ao renderizar o DOM. Depois de renderizar o DOM, o Vue gerará um atributo de dados de string aleatório no nó DOM, que fornece um identificador exclusivo para o DOM no componente atual.
Após o atributo scoped ser adicionado à tag de estilo, todo o CSS sob o estilo será convertido automaticamente após a renderização da página, e o mesmo valor de atributo de dados do DOM será adicionado ao filtro. Ou seja, a julgar pelos resultados, o atributo scoped faz com que o CSS funcione apenas nos elementos do componente atual, evitando a poluição global do CSS.
Deve-se notar que o filtro CSS modificado com escopo funciona apenas nos elementos escritos no compilador (na verdade, ele funciona apenas no elemento do componente atual). Por exemplo, se você usar a biblioteca de componentes do elemento, ela é escrita no compilador, mas depois que a página é renderizada, a classe do elemento de entrada é "el-input__inner". Neste momento, não funcionará se você escrever ".el-input__inner" no estilo do atributo com escopo, porque não há elemento com o nome de classe el-input__inner no componente atual.
>>> /deep/ ::v-deep
E se quisermos modificar tais elementos? Podemos remover o atributo com escopo para que o escopo não seja limitado ao componente atual. Mas removê-lo causará poluição de estilo global.Como podemos modificar o estilo do elemento elemento sem remover o escopo?
Uma maneira de evitar problemas é usar o estilo com o atributo com escopo e o estilo sem o atributo. Outro método é executar penetração de estilo no estilo do atributo com escopo.
As funções de /deep/ e ">>>" são as mesmas. Para diferentes pré-processadores css - por exemplo, sass não pode analisar o atributo ">>>" - você pode usar /deep/, que é um alias de ">>>", e o princípio é o mesmo.
Observação: a penetração de estilo só pode penetrar nos elementos filho, não nos elementos pai.
1.>>>
Se o projeto usa um projeto nativo css, você pode usar diretamente >>> para penetrar.
<style scoped>
/*编译前*/
.a >>> .b {
/* ... */
}
/*编译后*/
.a[data-v-f3f3eg9] .b {
/* ... */ }
</style>
2./profundo/
Os pré-processadores scss, sass e less são usados no projeto, e o operador >>> pode relatar um erro porque não pode ser compilado. Você pode usar /deep/ neste momento.
Nota: versões acima do vue-cli3 não podem ser usadas
<style lang="scss" scoped>
/*用法1*/
.a {
/deep/ .b {
/* ... */
}
}
/*用法2*/
.a /deep/ .b {
/* ... */
}
</style>
3.::v-deep
Se o pré-processador for usado, ::v-deep pode ser usado.
<style lang="scss" scoped>
/*用法1*/
.a{
::v-deep .b {
/* ... */
}
}
/*用法2*/
.a ::v-deep .b {
/* ... */
}
</style>