Vue의 범위별 사용 단계 분석

이번에는 Vue에서 범위 지정을 사용하는 단계를 분석해 보겠습니다. Vue에서 범위 지정을 사용할 때 주의 사항은 무엇입니까?

범위 지정이란 무엇인가요?

vue 파일의 스타일 태그에는 특수 속성인 범위가 있습니다. 스타일 태그에 범위 속성이 있는 경우 해당 CSS 스타일은 현재 구성 요소에만 적용할 수 있습니다. 즉, 스타일은 현재 구성 요소 요소에만 적용할 수 있습니다. 이 속성을 통해 컴포넌트 간의 스타일이 서로 오염되는 것을 방지할 수 있습니다. 프로젝트의 모든 스타일 태그에 범위가 지정되면 스타일의 모듈화를 달성하는 것과 같습니다.

scoped의 구현 원리

vue에서 범위가 지정된 속성의 효과는 주로 PostCSS 번역을 통해 달성됩니다. 다음은 번역 전의 vue 코드입니다.

<style>
.example {
 color: red;
}
</style>
<template>
 <p>hi</p>
</template>

번역 후:

<style>
.example[data-v-5558831a] {
 color: red;
}
</style>
<template>
 <p>hi</p>
</template>

즉, PostCSS입니다. 구성 요소에 고유한 동적 속성이 모든 DOM에 추가된 다음 해당 속성 선택기가 CSS 선택기에 추가되어 구성 요소에서 DOM을 선택합니다. 이 접근 방식을 사용하면 이 속성을 포함하는 DOM에만 스타일이 적용됩니다. —— 구성 요소 내부 돔.

왜 스코프 침투가 필요한가요?

scoped는 아름답게 보이지만 많은 프로젝트에서 references타사 구성 요소와 타사 구성 요소의 스타일을 제거하지 않고 해당 구성 요소에서 로컬로 수정해야 하는 상황이 있습니다. 속성은 구성 요소 간의 스타일 오염을 유발합니다. 이때, 범위 지정은 특별한 방법을 통해서만 침투할 수 있습니다.

<style>
 外层 >>> 第三方组件 {
  样式
 }
</style>

>>>를 사용하면 범위가 지정된 속성을 사용할 때 범위에 침투하여 다른 구성 요소의 값을 수정할 수 있습니다.

곡선을 통해 나라를 구하는 방법

사실 곡선을 통해 나라를 구하는 방법도 있는데, 즉 범위 속성을 포함하는 스타일 태그를 정의하는 것 외에 범위가 지정된 속성이 없는 스타일 태그, 즉 vue 구성 요소의 전역 스타일 태그 정의에서 범위가 있는 스타일 태그:

<style>
/* global styles */
</style>
<style>
/* local styles */
</style>

이때는 타사 스타일을 수정하는 CSS만 작성하면 됩니다. 첫 번째 스타일.

개인적으로 추천하는 방법

위 두 가지 방법 중 침투 방법은 실제로 범위 속성의 의미를 위반하고, 곡선 절약 방법은 코드를 너무 보기 흉하게 만듭니다.

저는 개인적으로 세 번째 방법을 추천합니다. 즉, 범위가 지정된 속성은 보기에는 아름답지만 함정이 많기 때문에 범위가 지정된 속성을 사용하지 않고 외부 돔에 고유한 클래스를 추가하여 서로 다른 구성 요소를 구별하는 것이 좋습니다. 이 방법은 범위 지정과 유사한 효과를 얻을 뿐만 아니라 다양한 타사 구성 요소의 스타일 수정을 용이하게 하며 코드가 비교적 편안해 보입니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

webpack을 사용하여 React 개발 환경을 구축하는 단계에 대한 자세한 설명

npm 모듈 설치 및 삭제 단계에 대한 자세한 설명

위 내용은 Vue의 범위별 사용 단계 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!