Vue의 범위 구현 원칙 및 침투 사용 단계에 대한 자세한 설명

이번에는 Vue의 범위 지정 구현 원리와 침투 사용 단계에 대해 자세히 설명하겠습니다. Vue의 범위 지정 구현 원리 및 침투 사용에 대한 참고 사항은 다음과 같습니다. .

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

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

scoped의 구현 원리

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

<style scoped>
.example {
 color: red;
}
</style>
<template>
 <p class="example">hi</p>
</template>

번역 후:

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

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

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

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

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

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

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

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

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

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

개인적으로 추천하는 방법

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

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

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

추천 도서:

WebPack을 사용하여 vue 다중 페이지를 구성하는 방법

node.js 기본 npm 설치 디렉터리를 작동하는 방법

위 내용은 Vue의 범위 구현 원칙 및 침투 사용 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!