vue 의 scoped 구덩이 설명 기반

오늘 iview 구성 요소 스타일 을 덮어 쓸 때 문 제 를 발 견 했 습 니 다.구성 요소 의 원래 스타일 을 덮어 쓸 수 없습니다.마지막 으로 github issue 에서 답 을 찾 았 습 니 다.
scoped 속성 을 사용 하지 마 십시오.그래서 나 는 scoped 에 관 한 글 을 찾 아 보 았 다.
우 리 는 이 구성 요 소 를 모듈 개인 구성 요소 라 고 가정 하고,다른 scoped 를 추가 하지 않 은 것 을 모듈 일반 구성 요소 라 고 부른다.DOM 구 조 를 보면 vue 는 DOM 구조 와 css 스타일 에 유일 하 게 중복 되 지 않 는 표 시 를 추가 하여 유일 하 게 스타일 민영화 모듈 화 목적 을 달성 하도록 한다.
코드 는 다음 과 같 습 니 다:

//valChange.less(       )
#valueSlide{
  .bigSlider .ivu-slider-wrap{
    height: 6px;
  }
  .bigSlider .ivu-slider-bar {
    height: 6px;
  }
  .bigSlider .ivu-slider-button{
    width: 14px;
    height: 14px;
  } 
}

//html 부분

<style lang="less" scoped>
  @import "./valChange.less";
</style>
<div class="valid-panel">
  <div class="containerBox">
    <div id="valueSlide" v-bind:style="validStyle">
      <Slider ></Slider>
    </div>
  </div>
</div>

즉,저희 가 style 에서 scoped 속성 을 사용 하면 다음 과 같은 상황 이 발생 합 니 다.
HTML 부분:

CSS 부분:

위의 글 자 를 통 해 알 수 있 듯 이 scoped 속성 을 추가 한 구성 요 소 는 구성 요소 스타일 모듈 화 를 위해 두 가지 처 리 를 했 습 니 다.
HTML 의 DOM 노드 에 중복 되 지 않 는 data 속성(예:data-v-19fca 230)을 추가 하여 그의 유일 성 을 표시 합 니 다.
모든 css 선택 기의 끝(컴 파일 된 css 구문)에 현재 구성 요소 의 data 속성 선택 기(예 를 들 어[data-v-2311 c06a])를 추가 하여 스타일 을 사유 화 합 니 다.
그럼 문제 가 왔 습 니 다.
현재 구성 요소 에서 호출 되 는 다른 구성 요소 에 대해 data 속성 은 1 층 HTML 에 만 추 가 됩 니 다.

덮어 쓰 고 싶 은 스타일 에 대해 서 는 역할 을 할 수 없습니다.(브 라 우 저 디 버 깅 에[data-v-19fca 230]속성 을 수 동 으로 추가 하면 일치 합 니 다)

해결 방안:
scoped 속성 사용 하지 않 기
scoped 세 가지 렌 더 링 규칙 을 정리 합 니 다.
HTML 의 DOM 노드 에 중복 되 지 않 는 data 속성(예:data-v-19fca 230)을 추가 하여 그의 유일 성 을 표시 합 니 다.
모든 css 선택 기의 끝(컴 파일 된 css 구문)에 현재 구성 요소 의 data 속성 선택 기(예 를 들 어[data-v-19fca 230])를 추가 하여 스타일 을 사유 화 합 니 다.
구성 요소 내부 에 다른 구성 요소 가 포함 되 어 있 으 면 다른 구성 요소 의 최상 위 탭 에 현재 구성 요소 의 data 속성 만 추가 합 니 다.
질문 보충:
1.scoped 를 사용 하지 않 으 면 스타일 전체 오염 을 어떻게 해결 합 니까?
scoped 를 사용 하여 구성 요소 의 개인 화 를 추진 하 는 것 을 추천 합 니 다.글 에서 언급 한 것 은 사용 하지 않 고 기 존 UI 라 이브 러 리 의 스타일 로 만 덮어 씁 니 다.(물론 사람들 이 scoped 를 사용 하면 어렵 습 니 다)
우선,구성 요소 스타일 의 전체 오염 을 해결 합 니 다.즉,우리 가 여기에서 scoped 를 사용 하지 않 고 스타일 을 덮어 쓰 면 다른 곳 에서 이 구성 요 소 를 호출 하면 덮어 씁 니 다.그러면 우 리 는 구성 요 소 를 사용 할 때 구성 요소 에 대해 클래스 이름 이나 다른 선별 속성(id)을 주 고 덮어 쓰기 스타일 은 이 클래스 이름 에 대해 다시 작성 합 니 다.
그 다음 에 다른 스타일 의 전체적인 오염 을 해결 합 니 다.만약 에 우리 가 통과 하면:

<style lang="less">
  @import "./test.less";
</style>

스타일 을 도입 하면 scoped 를 사용 하지 않 습 니 다."./test.less"의 다른 유형의 스타일 은 전 체 를 오염 시 킬 수 있 습 니 다.저 는 비교적 멍청 한 방법 으로 처리 합 니 다.템 플 릿 에서탭 을 두 번 사용 합 니 다.

<style lang="less" scoped>
  @import "./test.less";
</style>
<style lang="less">
  //      
</style>

이렇게 하면 스타일 도 덮어 쓰 고 다른 스타일 도 전체 에 덮어 쓰 지 않 습 니 다.효과 코드 는 제 가 지원 하 겠 습 니 다.관심 있 는 친구 들 이 직접 해 볼 수 있 습 니 다.(두 탭 의 순 서 를 주의 하 세 요.
홈 페이지vue-loader각 vue 템 플 릿 에태그 가 여러 개 있 을 수 있다 고 언급 되 어 있 기 때문에 위의 작성 방법 은 문제 가 없습니다.
보충 지식:Vue 의 scoped 및 관통 방법-->scoped 관통
scoped 가 무엇 입 니까?
vue 파일 의 style 탭 에 특별한 속성 이 있 습 니 다:scoped.스타일 탭 이 scoped 속성 을 가지 고 있 을 때,CSS 스타일 은 현재 구성 요소 에 만 적 용 됩 니 다.즉,이 스타일 은 현재 구성 요소 요소 에 만 적 용 됩 니 다.이 속성 을 통 해 구성 요소 간 의 스타일 이 서로 오염 되 지 않도록 할 수 있 습 니 다.한 항목 의 모든 style 태그 에 scoped 를 추가 하면 스타일 의 모듈 화 를 실현 하 는 것 과 같 습 니 다.
scoped 의 실현 원리
vue 의 scoped 속성의 효 과 는 주로 PostCSS 번역 을 통 해 이 루어 집 니 다.
다음은 번역 전의 vue 코드 입 니 다.

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

번역 후:

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

즉,PostCSS 는 한 구성 요소 의 모든 dom 에 유일한 동적 속성 을 추가 한 다음 에 CSS 선택 기 에 해당 하 는 속성 선택 기 를 추가 하여 이 구성 요소 의 dom 을 선택 합 니 다.이 방법 은 스타일 을 이 속성 을 포함 한 dom-구성 요소 내부 DOM 에 만 사용 합 니 다.
왜 scoped 를 관통 해 야 합 니까?
scoped 는 아름 다 워 보이 지만 여러 항목 에서 이러한 상황 이 발생 할 수 있 습 니 다.즉,제3자 구성 요 소 를 참조 하여 구성 요소 에서 제3자 구성 요소 의 스타일 을 부분 적 으로 수정 해 야 하고 scoped 속성 으로 인해 구성 요소 간 의 스타일 오염 을 제거 하고 싶 지 않 습 니 다.이 때 는 특별한 방식 으로 scoped 를 관통 할 수 밖 에 없다.

<style scoped>
     >>>       {
      
  }
</style>

실제 코드 예 를 들 어(저 는 elementui 제3자 구성 요소 라 이브 러 리 의 구성 요소 이름 을 사용 합 니 다):

<style scoped>
/* .footerContainer      .el-table--border td  elementui        */
.footerContainer >>> .el-table--border td {
 border-right: none;
}
.footerContainer .screen_configuration_el-table th {
 background-color: #eff2f7 !important;
 border-left: none !important;
 color: black !important;
}
.footerContainer >>> .el-table--border {
 border: 1px solid #ebeef5;
 border-left: none;
 border-right: none;
}
</style>

>>>를 통 해 scoped 속성 을 사용 한 상태 에서 scoped 를 관통 하여 다른 구성 요소 의 값 을 수정 할 수 있 습 니 다.
또 다른 방법 은 외부 도입-->전역 style css-->곡선 구국 방법
사실은 곡선 구국 방법 도 가지 고 있 습 니 다.즉,scoped 속성 을 가 진 style 라벨 을 정의 하 는 것 외 에 scoped 속성 이 없 는 style 라벨 을 정의 합 니 다.즉,vue 구성 요소 에서 전체적인 style 라벨 을 정의 하고 역할 영역 을 가 진 style 라벨 을 정의 합 니 다.

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

이 때 는 제3자 스타일 을 수정 한 css 를 첫 번 째 style 에 쓰 면 됩 니 다.
주의 할 곳:
>>>scoped 관통 선택 기 를 사용 하면 style 에 less sass scss 를 추가 할 수 없습니다.그렇지 않 으 면 오류 가 발생 합 니 다.
다음 그림:

이 는 vue 의 scoped 갱 점 해설 을 바탕 으로 소 편 이 여러분 에 게 공유 한 모든 내용 입 니 다.참고 가 되 고 응원 해 주 셨 으 면 좋 겠 습 니 다.