.vue 파일 의 style scoped 속성 에 대한 간단 한 설명

본 고 는.vue 파일 에서 style 의 scoped 속성 과 밟 은 구 덩이 를 소개 했다.구체 적 으로 다음 과 같다.
scoped 는 style 을 현재.vue 파일 에 만 사용 할 수 있 습 니 다.

<template>
  <div class="user"></div>
</template>
<script>

</script>

<style lang='less' scoped>
.user {
  color:#333;
}
</style>

위의 파일 이 보 여 주 는 dom 구 조 는 이 렇 습 니 다.

<div data-v-53795c54 class="user"></div>

css 스타일 은 이 렇 습 니 다.

.user[data-v-53795c54] {
  color:#333;
}

이렇게 하면 스타일 은 현재 vue 파일 에 만 작 동 합 니 다.
질문:scoped 속성 을 추가 하면 스타일 이 작 동 하지 않 습 니 다.
이 유 는 css 가.user[data-v-53795c54] 로 구축 되 었 으 나 doc 노드 는 여전히 일반적인로 스타일 이 dom 에 작용 하지 못 하고 효력 을 잃 었 기 때 문 입 니 다.
인 용 된 구성 요소 에서 해결 방법 은 scoped 속성 을 닫 는 것 입 니 다.
scoped 종료 시 사용 제안
scoped 를 닫 아야 한다 면 style 은 전체 페이지 에 작용 합 니 다.
그러나 현재.vue 파일 에 스타일 링 을 사용 하여 다른 파일 스타일 에 미 치 는 영향 을 줄 이 고 싶 습 니 다.
1.template 의 루트 노드 에 class 를 추가 하고 이 class 를 바탕 으로 스타일 을 추가 합 니 다.

<template>
<div class="user">
<p class="name">zaunk</p>
</div>
</template>
<script>

</script>

<style lang='less>
.user {
color:#333;
.name {
color:#122222;
}
}
</style>

2.첫 번 째 건 의 를 바탕 으로 같은 클 라 스 이름 을 정의 하 는 루트 노드 가 있어 서 는 안 됩 니 다.전체 페이지 에 작용 하면 하나의 실효 가 있 기 때 문 입 니 다.
3.span{}을 사용 하지 마 십시오....때문에

<template>
<div class="user">
<el-button class="name">zaunk</el-button>
</div>
</template>
<style lang='less>
.user {
color:#333;
span {
color:#122222;
}
}
</style>

위의 스타일 역시 구성 요소 인 el-button 에 작용 할 수 있 습 니 다.이것 은 매우 위험 합 니 다.
vue 구성 요소 에서 style scoped 에서 만난 구덩이

uve 구성 요소 에서 우 리 는 현재 스타일 이 현재 구성 요소 의 노드 에 만 작 동 하도록 style 에 scoped 를 추가 해 야 합 니 다.scoped 를 추가 한 후에 실제 vue 가 뒤에서 하 는 작업 은 현재 구성 요소 의 노드 를 data-v-1233 과 같은 유일한 속성 표 지 를 추가 하 는 것 입 니 다.물론 현재 style 의 모든 스타일 에[data-v-1233]을 추가 하면 현재 스타일 은 이전 구성 요소 의 노드 에 만 작용 할 수 있 습 니 다.그러나 우리 가 주의해 야 할 것 은 하위 구성 요 소 를 추가 하면 마찬가지 로 하위 구성 요소 도 scoped 로 표시 하면 부모 구성 요소 에서 하위 구성 요소 의 노드 를 설정 할 수 없습니다.부모 구성 요소 에 scoped 가 있 으 면 하위 구성 요소 가 설정 되 어 있 지 않 습 니 다.마찬가지 로 부모 구성 요소 에 하위 구성 요소 의 노드 를 설정 할 수 없습니다.부모 구성 요소 가 scoped 를 사 용 했 기 때문에 부모 구성 요소 에서 style 설정 스타일 은 모두 유일한 것 입 니 다.다른 구성 요소 스타일 과 는 작 동 하지 않 습 니 다.저 는 vue-quill-editor 부 텍스트 편집 기 를 사용 할 때 이 구 덩이 를 만 났 습 니 다.저 는 콘 텐 츠 구역 에 높이 를 설정 하고 싶 을 뿐 입 니 다.그러면 App.vue 에 설정 해 야 합 니 다.저희 App.vue 는 루트 용기 에 해당 하고 scoped 를 설정 하지 않 았 기 때문에 설정 할 수 있 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.