Vue 구성 요소 간 스타일 충돌 오염

1.오염 은 어떻게 발생 합 니까?
Vue-loader 덕분에 Vue 에 서 는 Web Component 와 유사 한 구성 요소 화 기법 을 사용 할 수 있 습 니 다<template></template><style></style><script></script>대부분의 경우 구성 요소 간 에 정 의 된 스타일 이 서로 격 리 되 기 를 바 랍 니 다.Weex 에 서 는 확실히 구성 요소 가 천성적으로 격 리 되 지만 Vue 에서 실 행 된 캐리어 는 브 라 우 저 입 니 다.모든 스타일 클래스 는 스타일 탭 을 통 해 머리 를 삽입 하여 전역,교차 오염 에 영향 을 줍 니 다.
2.Scoped 표지 추가
여전히 Vue-loader 입 니 다.구성 요소 의 style 라벨 에 scoped 표 지 를 추가 합 니 다.Vue-loader 는 컴 파일 하 는 과정 에서 구성 요소 의 모든 요소 노드 에 scopeId 를 속성 으로 추가 하고 모든 스타일 류 에 속성 선택 기 scopeId 를 추가 하여 격 리 효 과 를 얻 습 니 다.아마 다음 과 같 습 니 다.
모든 구성 요소 에 유일한 scopeId 가 있 습 니 다.이치 대로 말 하면 스타일 격 리 를 할 수 있 을 것 입 니 다.실제로 이런 방식 은 표현 하기에 충분 합 니 다.다음 과 같은 상황 을 제외 하고~
3.ScopeId 의 계승
우 리 는 위의 예 를 다시 보완 했다.

//    
<template>
  <div>
    <div class="bg"></div>
    <Sub></Sub>
  </div>
</template>
<script>
  import Sub from './sub';
  export default {
    components: { Sub }
  };
</script>
<style scoped>
.bg {
  background-color: #000;
  width: 100px;
  height: 100px;
}
</style>

//    
<template>
  <div class="bg">
  </div>
</template>
<script>
  export default {
  };
</script>
<style scoped>
.bg {
  width: 300px;
  height: 300px;
  margin-top: 5px;
}
</style>

scoped 표 지 를 사용 하여 스타일 격 리 를 했 기 때문에 하위 구성 요소 의 div 는 배경 색 이 있어 서 는 안 되 지만 현실 은 항상 얼굴 을 세 게 때 립 니 다~~

당신 의 윙크 가 문제 의 소 재 를 보 았 는 지 모 르 겠 습 니 다.
하위 원소 의 뿌리 원 소 는 부모 원소 의 ScopeId 를 계승 합 니 다!
하위 원소 의 뿌리 원 소 는 부모 원소 의 ScopeId 를 계승 합 니 다!
하위 원소 의 뿌리 원 소 는 부모 원소 의 ScopeId 를 계승 합 니 다!(세 번 말 했 으 니 중요 할 거 야)
하위 요소 의 루트 요 소 는 자신의 ScopeId 속성 을 가지 고 있 을 뿐만 아니 라 부모 요소 의 ScopeId 속성 도 계승 하기 때문에 부모 요소 의 스타일 류 bg 는 여전히 유효 합 니 다.
4.어떻게 깨 뜨 려 요?
해결 방식 도 간단 합 니 다.모든 구성 요소 의 루트 요소 에 다른 스타일 이름(있 으 면)을 제공 합 니 다.예 를 들 어 모든 구성 요소 의 이름 을 wrap 이 라 고 부 르 지 마 십시오.업무 이름 에 따라 b1-wrap,b2-wrap 등 입 니 다.
구성 요소 의 비 루트 요소,클래스 이름 은 아무리 이름 을 바 꿔 도 오염 되 지 않 습 니 다.스스로 깨 달 았 습 니 다~~
5.이것 은 Vue-loader 의 bug 에 속 해 야 합 니 다.
맞 아,이 건 bug 일 거 야.나 같 으 면 어떻게 풀 까?컴 파일 할 때 속성 을 늘 리 는 게 아니 라 scopeId 에 따라 클래스 이름 을 직접 수정 하 는 거 야.헤헤~~~
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.