범위
scoped 속성을 이해하기 전에 DOM을 렌더링할 때 Vue(그 안의 플러그인)가 무엇을 하는지 이해합시다. DOM을 렌더링한 후 Vue는 DOM 노드에서 임의의 문자열 데이터 속성을 생성하여 현재 구성 요소 아래의 DOM에 고유한 식별자를 제공합니다.
범위 속성이 스타일 태그에 추가된 후 스타일 아래의 모든 CSS는 페이지가 렌더링된 후 자동으로 변환되며 DOM과 동일한 데이터 속성 값이 필터에 추가됩니다. 즉, 결과로 볼 때 scoped 속성은 CSS가 현재 구성 요소에 대해서만 작동하도록 하여 CSS의 글로벌 오염을 방지합니다.
범위가 지정된 수정된 CSS 필터는 컴파일러에 작성된 요소에서만 작동한다는 점에 유의해야 합니다(실제로는 현재 구성요소 요소에서만 작동함). 예를 들어 요소 컴포넌트 라이브러리를 사용하면 컴파일러에서 작성하지만 페이지가 렌더링된 후 입력 요소의 클래스는 "el-input__inner"입니다. 이때 범위 속성의 스타일로 ".el-input__inner"를 작성하면 현재 컴포넌트에 클래스 이름이 el-input__inner인 요소가 없기 때문에 작동하지 않습니다.
>>> /deep/ ::v-deep
그렇다면 이러한 요소를 수정하려면 어떻게 해야 할까요? 범위가 현재 구성 요소로 제한되지 않도록 범위 속성을 제거할 수 있습니다. 그러나 그것을 제거하면 전체 스타일 오염이 발생합니다.범위 지정을 제거하지 않고 요소 요소의 스타일을 수정하려면 어떻게 해야 합니까?
문제를 해결하는 한 가지 방법은 범위 속성이 있는 스타일과 속성이 없는 스타일을 사용하는 것입니다. 또 다른 방법은 범위가 지정된 속성의 스타일에 스타일 침투를 수행하는 것입니다.
/deep/과 ">>>"의 기능은 동일합니다. 예를 들어 sass는 ">>>" 속성을 구문 분석할 수 없는 다른 css 전처리기의 경우 ">>>"의 별칭인 /deep/을 사용할 수 있으며 원칙은 동일합니다.
참고: 스타일 침투는 상위 요소가 아닌 하위 요소에만 침투할 수 있습니다.
1.>>>
프로젝트가 css 네이티브 프로젝트를 사용하는 경우 >>>를 직접 사용하여 침투할 수 있습니다.
<style scoped>
/*编译前*/
.a >>> .b {
/* ... */
}
/*编译后*/
.a[data-v-f3f3eg9] .b {
/* ... */ }
</style>
2./깊은/
프로젝트에서 전처리기 scss, sass 및 less를 사용하며 >>> 연산자는 컴파일할 수 없기 때문에 오류를 보고할 수 있습니다. 이때 /deep/을 사용할 수 있습니다.
참고: vue-cli3 이상의 버전은 사용할 수 없습니다.
<style lang="scss" scoped>
/*用法1*/
.a {
/deep/ .b {
/* ... */
}
}
/*用法2*/
.a /deep/ .b {
/* ... */
}
</style>
3.::v-딥
전처리기를 사용하는 경우 ::v-deep을 사용할 수 있습니다.
<style lang="scss" scoped>
/*用法1*/
.a{
::v-deep .b {
/* ... */
}
}
/*用法2*/
.a ::v-deep .b {
/* ... */
}
</style>