Vue에서 스타일의 범위 속성을 사용하는 방법

이 글에서는 주의 깊게 사용되는 Vue의 스타일 범위 속성을 주로 소개합니다. 편집자는 이것이 꽤 좋다고 생각합니다. 이제 이를 여러분과 공유하고 참고용으로 제공하겠습니다. 편집기를 따라 살펴보겠습니다

vue 구성 요소에서 스타일을 사유화(모듈화)하고 전역 세계를 오염시키지 않기 위해 스타일 태그에 범위 속성을 추가하여 해당 스타일이 현재에만 속함을 나타낼 수 있습니다. 모듈입니다. 이것은 매우 좋은 움직임이지만 왜 주의해서 사용해야 합니까? 공개 구성 요소(타사 라이브러리 또는 프로젝트 사용자 정의 구성 요소)의 스타일을 수정해야 할 때 범위 지정은 종종 더 많은 어려움을 야기하고 추가적인 복잡성을 요구하기 때문입니다.

사유화된 스타일의 범위 구현 원칙

왜 복잡성이 증가할 것이라고 생각하시나요? 그럼 모듈 구현의 원칙부터 시작해 보겠습니다. 명명의 편의를 위해 이러한 종류의 컴포넌트를 모듈 전용 컴포넌트라고 하고, 범위가 지정되지 않은 다른 컴포넌트를 모듈 일반 컴포넌트라고 가정합니다.

DOM 구조를 살펴보면 Vue가 DOM 구조와 CSS 스타일에 고유하고 반복되지 않는 태그를 추가하여 고유성을 보장하고 스타일을 사유화하고 모듈화하려는 목적을 달성한다는 것을 발견했습니다. 구체적인 렌더링 결과를 예시를 통해 설명합니다.

공용 구성 요소 버튼 구성 요소

공용 구성 요소 버튼은 스타일을 모듈화하기 위해 범위가 지정된 속성을 여기에 추가합니다.

//button.vue
<template>
  <p class="button-warp">
    <button class="button">text</button>
  </p>
</template>
...
<style scoped>
  .button-warp{
    display:inline-block;
  }
  .button{
    padding: 5px 10px;
    font-size: 12px;
    border-radus: 2px;
  }
</style>

브라우저는 버튼 구성 요소를 렌더링합니다

에 의해 렌더링된 html 부분의 버튼 구성 요소 브라우저 및 CSS 부분은 다음과 같습니다.

<p data-v-2311c06a class="button-warp">
  <button data-v-2311c06a class="button">text</button>
</p>

.button-warp[data-v-2311c06a]{
  display:inline-block;
}
.button[data-v-2311c06a]{
  padding: 5px 10px;
  font-size: 12px;
  border-radus: 2px;
}

위 단어에서 볼 수 있듯이 구성 요소 스타일의 모듈화를 달성하기 위해 범위가 지정된 속성이 추가된 구성 요소에 대해 두 가지 프로세스가 수행됩니다.

1. 중복되지 않은 데이터 추가 HTML DOM 노드 속성(예: data-v-2311c06a)에 고유성을 나타내기 위해

2. 각 CSS 선택기(컴파일 및 생성된 CSS 문) 끝에 현재 구성 요소의 데이터 속성 선택기(예: [ data-v-2311c06a]) 스타일을 사유화하려면

모두가 CSS 스타일에 우선순위가 있다는 것을 알고 있습니다. 비록 이 범위 지정 작업이 구성 요소 스타일을 모듈화한다는 목적을 달성하지만 다음과 같은 결과를 초래합니다. 각 스타일의 가중치는 다음과 같습니다. 증가: 이론적으로 이 스타일을 수정하려면 이 스타일을 커버하기 위해 더 높은 가중치가 필요합니다. 이는 복잡성을 추가하는 차원 중 하나입니다.

다른 컴포넌트는 버튼 컴포넌트를 참조

위는 단일 컴포넌트 렌더링 결과를 분석한 것인데, 컴포넌트들이 서로 호출한 후의 결과는 어떻게 될까요? , 구체적으로 두 가지 상황으로 구분됩니다. 모듈 일반 구성 요소는 모듈 전용 구성 요소를 참조합니다(본질적으로 모듈 전용 구성 요소는 모듈 일반 구성 요소를 참조함). 모듈 전용 구성 요소는 모듈 전용 구성 요소를 참조합니다.

예: content.vue 컴포넌트에 버튼 컴포넌트를 사용한 경우, content.vue 컴포넌트에 범위 속성을 추가하면 렌더링 결과에 어떤 차이가 있나요?

//content.vue
<template>
  <p class="content">
    <p class="title"></p>
    <!-- v-button假设是上面定义的组件 -->
    <v-button></v-button>
  </p>
</template>
...
<style>
  .content{
    width: 1200px;
    margin: 0 auto;
  }
  .content .button{
    border-raduis: 5px;
  }
</style>

모듈의 일반 구성 요소(범위가 지정되지 않음)는 모듈의 비공개 구성 요소를 나타냅니다.

범위가 지정된 속성이 스타일에 추가되지 않은 경우 렌더링된 HTML 및 CSS는 다음과 같습니다.

<p class="content">
  <p class="title"></p>
  <!-- v-button假设是上面定义的组件 -->
  <p data-v-2311c06a class="button-warp">
    <button data-v-2311c06a class="button">text</button>
  </p>
</p>

/*button.vue渲染出来的css*/
.button-warp[data-v-2311c06a]{
  display:inline-block;
}
.button[data-v-2311c06a]{
  padding: 5px 10px;
  font-size: 12px;
  border-radus: 2px;
}
/*content.vue渲染出来的css*/
.content{
  width: 1200px;
  margin: 0 auto;
}
.content .button{
  border-raduis: 5px;
}

다음과 같이 볼 수 있습니다. 콘텐츠 구성 요소에서는 버튼이 border-raduis 속성으로 수정되었지만 가중치 관계로 인해 구성 요소 내부 스타일이 여전히 적용됩니다(이때 외부 스타일이 재정의됨). 따라서 스타일 수정이라는 목적을 달성하려면 수정하려는 스타일의 가중치를 늘려야 합니다(선택기 수준 추가, ID 선택기, 병렬 선택기, 중요 등)

모듈 비공개 구성 요소(범위 지정 추가) ) 참조 모듈 비공개 구성 요소

범위 속성이 추가되면 어떻게 되나요? 처음에 분석된 규칙에 따르면(이것도 사실입니다):

먼저 모든 DOM 노드에 데이터 속성을 추가합니다

그런 다음 CSS 선택기 끝에 데이터 속성 선택기를 추가합니다

그런 다음 렌더링된 html과 css는 다음과 같습니다. 각각 :

<p data-v-57bc25a0 class="content">
  <p data-v-57bc25a0 class="title"></p>
  <!-- v-button假设是上面定义的组件 -->
  <p data-v-57bc25a0 data-v-2311c06a class="button-warp">
    <button data-v-2311c06a class="button">text</button>
  </p>
</p>

/*button.vue渲染出来的css*/
.button-warp[data-v-2311c06a]{
  display:inline-block;
}
.button[data-v-2311c06a]{
  padding: 5px 10px;
  font-size: 12px;
  border-radus: 2px;
}
/*content.vue渲染出来的css*/
.content[data-v-57bc25a0]{
  width: 1200px;
  margin: 0 auto;
}
.content .button[data-v-57bc25a0]{
  border-raduis: 5px;
}

위의 두 상황에서 렌더링 결과가 매우 다르다는 것을 분명히 알 수 있습니다.

버튼 컴포넌트의 스타일을 수정하고 싶은 컨텐츠에 코드를 추가했지만, 자세히 보면 .content .button 문장이 마지막에 컨텐츠 컴포넌트의 범위 태그를 추가하므로 마지막 문장은 실제로 DOM 노드에는 전혀 영향을 미치지 않으므로 이 경우 콘텐츠 내부에 작성하는 스타일은 버튼.vue 구성 요소에 영향을 미치지 않으므로 당황스럽습니다. . . .

물론 이 문제도 해결할 수 있습니다. 즉, 전역 스타일을 직접 추가하여 수정할 수 있지만 이는 필연적으로 모든 위치의 구성 요소에 영향을 미치므로 범위가 지정된 속성 없이 스타일을 추가하려면 다른 방법이 필요합니다. content.vue 구성 요소 태그는 개인 스타일과 공개 스타일의 두 가지 스타일을 추가하는 것을 의미합니다. 이것은 확실히 약간 똥이며 두 솔루션 모두 무게라는 한 가지 문제를 피할 수 없습니다! ! !

//content.vue
<template>
  <p class="content">
    <p class="title"></p>
    <!-- v-button假设是上面定义的组件 -->
    <v-button></v-button>
  </p>
</template>
...
<style scoped>
  .content{
    width: 1200px;
    margin: 0 auto;
  }
</style>
<style>
  .content .button{
    border-raduis: 5px;
  }
</style>

규정에 맞는 건가요? 이렇게 쓰면 안되는 걸 못 본 것 같은데 효과가 있더라고요. . . 그러나 이는 사고의 복잡성을 증가시켜 약간 괴로운 ​​일입니다.

범위가 지정된 렌더링 규칙 요약

범위가 지정된 세 가지 렌더링 규칙 요약

1. HTML DOM 노드에 반복되지 않는 데이터 속성(형식: data-v-2311c06a)을 추가하여 고유성을 표현합니다.

2. 각 CSS 선택기(컴파일 및 생성된 CSS 문) 끝에 현재 구성 요소의 데이터 속성 선택기(예: [data-v-2311c06a])를 추가하여 스타일을 비공개화하세요

3. 구성 요소가 내부인 경우 다른 구성 요소가 포함된 경우 현재 구성 요소의 데이터 속성만 다른 구성 요소의 가장 바깥쪽 태그에 추가됩니다.

Solution

참조된 타사 라이브러리의 경우 상대방이 범위 지정을 사용하는 경우 스타일을 정말로 수정해야 한다면 범위가 지정되지 않은 구성 요소에서 스타일을 수정하거나 전역 스타일을 직접 수정하는 것이 가장 좋습니다.

관리하는 컴포넌트에 대해서는 해당 컴포넌트의 스타일이 모든 상황을 충족할 수 있는지 명확하게 생각해야 합니다. 꼭 추가해야 한다면 이 구성 요소를 사용하는 개발자의 작업량이 확실히 늘어날 것입니다!

물론, 이 문제에 대한 더 나은 해결책이 있다면 알려주세요!

흥미로운 사실

823db3943044a0a9a620ada8d4b1d965 범위 지정을 사용할 때 이 기능을 주의해야 합니다. 버그인 줄 알고 문제를 제기했는데 f6236f917cb4ada62f5c34ba44124864 매우 횡포한 답변
범위 디자인 원래 의도는 디자인 때문에 현재 구성 요소의 스타일이 다른 곳의 스타일을 수정하는 것을 허용하지 않는 것입니다. 그래서 이 호는 당연히 종료되었습니다

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되기를 바랍니다.

관련 기사:

Nodejs의 암호화 모듈 보안 지식에 대하여(자세한 튜토리얼)

Angular에서 드롭다운 상자 퍼지 쿼리 기능을 구현하는 방법

js에서 슬라이딩 확인이 필요한 로그인을 구현하는 방법

위 내용은 Vue에서 스타일의 범위 속성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!