Vue의 범위 지정 구현 원리 및 범위 지정 침투 사용(코드 포함)

이 글의 내용은 Vue에서 범위 지정의 구현 원리와 (코드 포함) 특정 참고 가치가 있으므로 도움이 될 수 있기를 바랍니다.

1. 범위 지정이란 무엇인가요? Vue 파일의 스타일 태그에 범위 지정이라는 특별한 속성이 있습니다. 스타일 태그에 범위가 지정된 속성이 있는 경우 해당 CSS 스타일은 현재 Vue 구성 요소에만 사용할 수 있으므로 구성 요소의 스타일이 서로 오염되지 않습니다. 프로젝트의 모든 스타일 태그에 범위 속성을 추가하면 스타일 모듈화를 구현하는 것과 같습니다.

2. 범위 지정의 구현 원리

Vue에서 범위 지정 속성의 효과는 주로 PostCss를 통해 달성됩니다. 다음은 번역 전 코드입니다.

<style scoped>
    .example{
        color:red;
    }
</style>
<template>
    <div>scoped测试案例</div>
</template>

번역 후:

.example[data-v-5558831a] {
  color: red;
}
<template>
    <div class="example" data-v-5558831a>scoped测试案例</div>
</template>

즉, PostCSS는 컴포넌트의 모든 DOM에 고유한 동적 속성을 추가하고 해당 속성 선택기를 CSS 선택기에 추가하여 DOM에서 컴포넌트를 선택합니다. 이 접근 방식을 사용하면 이 속성을 포함하는 dom 요소(구성 요소 내부의 dom)에만 스타일이 적용됩니다.

요약: 범위 렌더링 규칙:

고유한 데이터 속성(예: data-v-5558831a)을 HTML dom 노드에 추가하여 각 CSS 선택기에서 이 dom 요소
를 고유하게 식별합니다. 끝에서( 컴파일 후 생성된 CSS 문), 현재 구성 요소의 데이터 속성 선택기(예: [data-v-5558831a])를 추가하여 스타일
3.scoped 침투

scoped가 좋아 보입니다. Vue 프로젝트에서 그 당시 타사 구성 요소 라이브러리(예: vue-awesome-swiper를 사용하여 모바일 캐러셀 구현)를 도입했을 때 범위 속성을 제거하지 않고 로컬 구성 요소에서 타사 구성 요소 라이브러리의 스타일을 수정해야 했습니다. . 구성 요소 간에 스타일이 재정의됩니다. 이때 특별한 방법으로 범위를 침투할 수 있습니다.

스타일러스 스타일 침투는 >>>

    外层 >>> 第三方组件 
        样式
        
   .wrapper >>> .swiper-pagination-bullet-active
    background: #fff

sass를 사용하고 덜 스타일 침투는 /deep/

    外层 /deep/ 第三方组件 {
        样式
    }
    .wrapper /deep/ .swiper-pagination-bullet-active{
      background: #fff;
    }

3을 사용합니다. 컴포넌트에서 타사 컴포넌트 라이브러리 스타일을 수정하는 다른 방법

위에서 소개했습니다. 범위가 지정된 속성을 사용하면 scopd 침투를 통해 타사 구성 요소 라이브러리 스타일을 도입하는 방법을 수정할 수 있습니다. 아래에서는 가져온 타사 구성 요소 라이브러리의 스타일을 수정하는 다른 방법을 소개합니다.

vue에서 범위가 지정된 속성을 사용하지 마세요. vue 구성 요소의 두 가지 스타일 태그를 사용합니다. 하나는 범위 속성이 있고 다른 하나는 범위 속성이 없는 스타일 태그에 덮어써야 하는 CSS 스타일입니다. ) 파일을 작성하고 그 안에 재정의를 작성합니다. CSS 스타일은 항목 파일 main.js에 도입됩니다.

추천 관련 기사:

위 내용은 Vue의 범위 지정 구현 원리 및 범위 지정 침투 사용(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!