Vue 구성 요소 간 스타일 충돌 오염
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 에 따라 클래스 이름 을 직접 수정 하 는 거 야.헤헤~~~
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue Render 함수로 DOM 노드 코드 인스턴스 만들기render에서createElement 함수를 사용하여 DOM 노드를 만드는 것은 직관적이지 않지만 일부 독립 구성 요소의 디자인에서 특수한 수요를 충족시킬 수 있습니다.간단한 렌더링 예는 다음과 같습니다. 또한 v...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.