Vue.js의 범위 모드에서 하위 구성 요소의 내부 레이블 스타일을 수정하는 방법

이 글에서는 Vue.js의 범위 지정 모드에서 하위 구성 요소의 내부 레이블 스타일을 수정하는 방법을 공유하겠습니다. 내용이 꽤 좋아서 도움이 필요한 친구들에게 도움이 되기를 바랍니다.

Vue.js 프로젝트에서는 일반적으로 다음을 추가합니다. scoped 속성을 태그에 추가하여 다음 코드에 표시된 대로 구성 요소에 대한 고유 속성을 생성합니다.

my-comp.vue

my comp

export default { } 로그인 후 복사 Generate html에서는 p 와 모든 하위 태그에 data-v-0a679ea0 식별 속성이 있음을 알 수 있습니다. 이 속성은 에 scoped 를 추가한 결과입니다. scoped 를 추가하지 마세요. 이 식별 속성은 생성되지 않습니다.

이 식별 속성이 제공하는 한 가지 이점은 구성 요소 내의 스타일이 다른 구성 요소의 레이블에 영향을 미치지 않는다는 것입니다. my-comp 구성 요소에 다음 스타일을 썼다고 상상해 보세요.

span { color: red; } 로그인 후 복사 이 스타일은 다음과 같습니다. 매우 일반적인 스타일입니다. 다른 구성 요소에 span 태그가 있으면 이 태그에 적용됩니다. scoped 를 추가하면 최종 생성된 스타일은 다음과 같습니다.

span { color: red; } //生成后如下 span[data-v-0a679ea0] { color: red; } 로그인 후 복사 span[data- v-0a679ea0 ] 식별 속성은 구성 요소마다 고유하므로 이 스타일은 자체 구성 요소의 범위에만 적용됩니다.

컴포넌트 A를 컴포넌트 B 안에 넣으면 이 식별 속성이 어떻게 생성되는지 살펴보겠습니다.

home.vue

import MyCompo from './my-comp' export default { components: {MyCompo} } 로그인 후 복사 생성된 HTML 코드는 다음과 같습니다.

data-v-957c7522 는 home 구성 요소의 식별 속성이며 이 속성은 있다 구성 요소 루트의 my -comp 에도 추가되었지만 my-comp 의 span 태그는 data-v-957c7522 식별 속성을 추가하지 않습니다. 왜냐하면 이 span 는 my-comp 컴포넌트 내부의 태그이고, 표시되지 않은 내용은 home 컴포넌트에 적혀 있습니다.

그러나 때로는 my-comp의 태그를 수정하기 위해 홈 구성 요소에 스타일을 작성해야 하는 상황이 있습니다.

아래 코드를 보세요:

이 코드는 홈 구성 요소에 속합니다

.my-comp span { color: blue; } 로그인 후 복사 하지만 이 코드는 변경되지 않습니다 my comp 색상은 이 스타일의 최종 생성된 모양이 다음과 같기 때문입니다.

my-comp span 태그에는 로고 data-v-957c9522 속성이 없습니다. .

이 문제를 해결하는 방법은 무엇입니까?

홈 구성 요소의 범위를 제거하면 문제를 해결할 수 있지만 이는 권장되지 않습니다. 위에서 언급한 것처럼 범위가 없는 스타일은 다른 구성 요소에 쉽게 영향을 미칠 수 있습니다.

less와 같은 스타일 언어를 사용하는 경우 매우 좋은 해결책이 있습니다. 다음 코드를 살펴보세요.

@deep: ~'>>>'; .my-comp @{deep} span { color: blue; } 로그인 후 복사 최종 생성된 스타일이 어떤 모습인지 살펴보겠습니다.

identity 속성이 span 에서 .my-comp 로 이동되었습니다. 따라서 이 스타일은 my-comp 구성 요소의 내부 span 태그에 잘 적용될 수 있으며 다른 구성 요소에는 영향을 미치지 않습니다.